['设置中心']
This commit is contained in:
149
uni_modules/lime-f2/changelog.md
Normal file
149
uni_modules/lime-f2/changelog.md
Normal file
@@ -0,0 +1,149 @@
|
||||
## 0.5.1（2021-05-14）
|
||||
- feat: props 增加 `isDisableScroll` ，触摸图表时是否禁止页面滚动
|
||||
- feat: props 增加 `webviewStyles` ，webview 的样式, 仅nvue有效
|
||||
## 0.5.0（2021-05-13）
|
||||
- docs: 插件用到了css 预编译器 [stylus](https://ext.dcloud.net.cn/plugin?name=compile-stylus) 请安装它
|
||||
## [代码示例：http://liangei.gitee.io/limeui/#/f2-example](http://liangei.gitee.io/limeui/#/f2-example)
|
||||
## 0.4.9（2021-05-12）
|
||||
- fix: 修复 百度平台 多个图表时 只生效一个的bug
|
||||
## 0.4.8（2021-05-10）
|
||||
- feat: 增加 `destroy` 方法，用于销毁实例
|
||||
- feat: 增加 `canvasToTempFilePath` 方法，用于生成图片
|
||||
```js
|
||||
this.$refs.chart.canvasToTempFilePath({success: res => {
|
||||
console.log('tempFilePath:', res.tempFilePath)
|
||||
}})
|
||||
```
|
||||
## [代码示例：http://liangei.gitee.io/limeui/#/f2-example](http://liangei.gitee.io/limeui/#/f2-example)
|
||||
|
||||
## 0.4.7（2021-05-10）
|
||||
- chore: F2 版本更新至 3.8.7
|
||||
## 0.4.6（2021-05-05）
|
||||
- docs: nvue 使用文档更新
|
||||
## [代码示例：http://liangei.gitee.io/limeui/#/f2-example](http://liangei.gitee.io/limeui/#/f2-example)
|
||||
## 0.4.5.7（2021-04-30）
|
||||
- chore: nvue 增强 支持 console.log 输出到控制台方便调试
|
||||
- docs: nvue 使用文档更新，不再需要声明F2
|
||||
## 0.4.5.6（2021-04-29）
|
||||
- fix: nvue 修复打包后 函数字符串被压缩无效的问题
|
||||
- 若发现打包依然无效可使用直接返回字符串
|
||||
```js
|
||||
this.$refs.chart.init(config => {
|
||||
return `
|
||||
const chart = new F2.Chart(config);
|
||||
chart.source(data);
|
||||
chart
|
||||
.interval()
|
||||
.position('genre*sold')
|
||||
.color('genre');
|
||||
chart.render();
|
||||
return chart;
|
||||
`
|
||||
},{data});
|
||||
```
|
||||
- chore: 新增支持词云能力，头条小程序需要1.78.0后
|
||||
## [代码示例：http://liangei.gitee.io/limeui/#/f2-example](http://liangei.gitee.io/limeui/#/f2-example)
|
||||
## 0.4.5.5（2021-04-25）
|
||||
- fix: 修复新版谷歌浏览器(90.0.4430.85) 报 `transform ` 的问题
|
||||
## 0.4.5.4（2021-04-23）
|
||||
- fix: 修复支付宝小程序尺寸问题
|
||||
## [代码示例：http://liangei.gitee.io/limeui/#/f2-example](http://liangei.gitee.io/limeui/#/f2-example)
|
||||
## 0.4.5.3（2021-04-22）
|
||||
- chore: 删除多余console.log
|
||||
## 0.4.5.2（2021-04-21）
|
||||
- chore: 修复字节颜色报错的问题。
|
||||
## 0.4.5.1（2021-04-18）
|
||||
- chore: 增加默认尺寸 **300 x 300** , 当父级没有尺寸时启用。
|
||||
- 由于 F2 **云图** 依赖的 `@antv/data-set` 只支持H5创建Canvas，所以暂时只有 H5 支持。
|
||||
- 由于 F2 对绘制地图 不佳，故地图示例南海诸岛使用图片。
|
||||
## [代码示例：http://liangei.gitee.io/limeui/#/f2-example](http://liangei.gitee.io/limeui/#/f2-example)
|
||||
## 0.4.5（2021-04-16）
|
||||
- fix: 修复 app-vue 字体固定问题
|
||||
- fix: 修复 h5 app-vue 画多边形尺寸过大
|
||||
- fix: 修复 初始化 func 问题
|
||||
- docs: 增加 矩形式树图 示例
|
||||
- 由于 F2 **云图** 依赖的 `@antv/data-set` 只支持H5创建Canvas，所以暂时只有 H5 支持。
|
||||
## 0.4.4.1（2021-04-16）
|
||||
- chore: 更改 `webview` 地址
|
||||
## 0.4.4（2021-04-16）
|
||||
- chore: `nvue` 增加 chart.$emit 事件，主要用于图表交互，接收动作事件数据。
|
||||
```html
|
||||
<l-f2 @change="onChange" />
|
||||
```
|
||||
```js
|
||||
chart.tooltip({
|
||||
onChange: (ev) => {
|
||||
chart.$emit('change', ev)
|
||||
}
|
||||
})
|
||||
```
|
||||
## [代码示例：http://liangei.gitee.io/limeui/#/f2-example](http://liangei.gitee.io/limeui/#/f2-example)
|
||||
## 0.4.3.1（2021-04-14）
|
||||
- docs: 更新官网上的代码示例！复制粘贴即用
|
||||
## [代码示例 http://liangei.gitee.io/limeui/#/f2-example](http://liangei.gitee.io/limeui/#/f2-example)
|
||||
## 0.4.3（2021-04-13）
|
||||
- chore: 增加`onInit`的属性函数，直接向图表传递初始化函数
|
||||
```html
|
||||
<l-f2 :onInit="onInitChart" />
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data: ()=>({
|
||||
onInitChart: config => {
|
||||
const chart = new F2.Chart(config);
|
||||
const data = [
|
||||
{ value: 63.4, city: 'New York', date: '2011-10-01' },
|
||||
{ value: 62.7, city: 'Alaska', date: '2011-10-01' },
|
||||
{ value: 72.2, city: 'Austin', date: '2011-10-01' },
|
||||
{ value: 58, city: 'New York', date: '2011-10-02' },
|
||||
{ value: 59.9, city: 'Alaska', date: '2011-10-02' },
|
||||
{ value: 67.7, city: 'Austin', date: '2011-10-02' },
|
||||
{ value: 53.3, city: 'New York', date: '2011-10-03' },
|
||||
{ value: 59.1, city: 'Alaska', date: '2011-10-03' },
|
||||
{ value: 69.4, city: 'Austin', date: '2011-10-03' },
|
||||
];
|
||||
chart.source(data, {
|
||||
date: {
|
||||
range: [0, 1],
|
||||
type: 'timeCat',
|
||||
mask: 'MM-DD'
|
||||
},
|
||||
value: {
|
||||
max: 300,
|
||||
tickCount: 4
|
||||
}
|
||||
});
|
||||
chart.area().position('date*value').color('city').adjust('stack');
|
||||
chart.line().position('date*value').color('city').adjust('stack');
|
||||
chart.render();
|
||||
// 注意：需要把chart return 出来
|
||||
return chart;
|
||||
}
|
||||
})
|
||||
}
|
||||
```
|
||||
## 0.4.2（2021-04-09）
|
||||
- chore: `nvue` webview 改为网络地址
|
||||
## 0.4.1（2021-04-09）
|
||||
- chore: `redraw(callback)` 更名为 `reset(callback)`
|
||||
- fix: 修复 `nvue` 某些情况下无法传递函数字符串
|
||||
- feat: 增加 `nvue` 下使用 `insertCss` 给节点设置 style
|
||||
## 0.4.0（2021-04-08）
|
||||
- chore: antv F2 version 更新到 `3.8.6`
|
||||
- feat: `f2-all`,`f2-simple`等文件，默认只提供`f2.min.js`,如果需要`f2-all`或`f2-simple`可去码云下载按自已需要引入！
|
||||
- fix: 修复钉钉小程序measureText undefined的问题
|
||||
- fix: 修复小程序因`hammer`引用报错
|
||||
## 0.3.0（2021-04-06）
|
||||
- feat: `redraw(callback)` 方法重绘
|
||||
- feat: `clear()` 方法清空图表
|
||||
- feat: `changeData(data)` 方法更新图表，需要传数据
|
||||
- feat: `repaint()` 方法更新图表：`source` 数据源 更新后，在需要的时候调用
|
||||
- feat: `source` 数据源 和 `is-auto-play` 开启自动更新，配置这两个参数只要 `source` 数据源更新，就会更新图表
|
||||
## 0.2.2（2021-04-05）
|
||||
- fix: 修复微信小程序缺少`Transform`报错问题
|
||||
## 0.2.1（2021-04-04）
|
||||
- chore: 考虑到不是所有人需要 `nvue`，所以 `webview` 改为网络路径 , 当然你也可以把html下载放置到项目根目录的`hybrid`文件夹下
|
||||
## 0.2.0（2021-04-04）
|
||||
- chore: 基于 `webview` 实现兼容 `nvue`
|
||||
## 0.1.0（2021-04-02）
|
||||
- chore: 第一次上传，基本全端兼容，使用方法与官网一致。
|
||||
121
uni_modules/lime-f2/components/lime-f2/canvas.js
Normal file
121
uni_modules/lime-f2/components/lime-f2/canvas.js
Normal file
@@ -0,0 +1,121 @@
|
||||
import {
|
||||
pixelRatio,
|
||||
sleep
|
||||
} from './utils';
|
||||
|
||||
const UNI_CANVAS_CONTEXT_MAP = {
|
||||
// #ifndef MP-WEIXIN
|
||||
fillStyle: 'FillStyle',
|
||||
fontSize: 'FontSize',
|
||||
globalAlpha: 'GlobalAlpha',
|
||||
opacity: 'GlobalAlpha',
|
||||
lineCap: 'LineCap',
|
||||
lineJoin: 'LineJoin',
|
||||
lineWidth: 'LineWidth',
|
||||
miterLimit: 'MiterLimit',
|
||||
strokeStyle: 'StrokeStyle',
|
||||
textAlign: 'TextAlign',
|
||||
textBaseline: 'TextBaseline',
|
||||
shadow: 'Shadow',
|
||||
// #endif
|
||||
// #ifdef MP-TOUTIAO || H5 || APP-PLUS
|
||||
font: 'FontSize',
|
||||
// #endif
|
||||
};
|
||||
|
||||
function strLen(str) {
|
||||
let len = 0;
|
||||
for (let i = 0; i < str.length; i++) {
|
||||
if (str.charCodeAt(i) > 0 && str.charCodeAt(i) < 128) {
|
||||
len++;
|
||||
} else {
|
||||
len += 2;
|
||||
}
|
||||
}
|
||||
return len;
|
||||
}
|
||||
|
||||
// 头条小程序目前仅支持 setFontSize
|
||||
// f2 会将所有属性整合为 font 简写，从中提取 fontSize 支持
|
||||
const fontSizeReg = /(\d*\.?\d*)px/;
|
||||
const colorReg = /#([0-9a-fA-F])([0-9a-fA-F])([0-9a-fA-F])\b/g;
|
||||
export default (ctx) => {
|
||||
// #ifdef H5 || APP-PLUS
|
||||
ctx.uniTransform = ctx.transform
|
||||
ctx.transform = (...agrs) => {
|
||||
if (ctx.draw && agrs[6]) {
|
||||
agrs[4] *= pixelRatio
|
||||
agrs[5] *= pixelRatio
|
||||
}
|
||||
if (agrs.length > 6) {
|
||||
agrs.pop()
|
||||
}
|
||||
ctx.uniTransform(...agrs)
|
||||
}
|
||||
// #endif
|
||||
// #ifdef MP-ALIPAY
|
||||
ctx.canvasGetImageData = ctx.getImageData
|
||||
ctx.getImageData = null
|
||||
// #endif
|
||||
if (!ctx.getImageData) {
|
||||
ctx.getImageData = (...agrs) => {
|
||||
const [x, y, width, height] = agrs
|
||||
return new Promise(resolve => {
|
||||
const parms = {
|
||||
canvasId: ctx.id || ctx.canvasId,
|
||||
x,
|
||||
y,
|
||||
width,
|
||||
height,
|
||||
success: res => {
|
||||
resolve(res.data)
|
||||
}
|
||||
}
|
||||
// #ifndef MP-ALIPAY || MP-TOUTIAO
|
||||
uni.canvasGetImageData(parms)
|
||||
// #endif
|
||||
// #ifdef MP-ALIPAY || MP-TOUTIAO
|
||||
ctx.canvasGetImageData(parms)
|
||||
// #endif
|
||||
})
|
||||
}
|
||||
}
|
||||
// 钉钉小程序框架不支持 measureText 方法，用此方法 mock
|
||||
if (!ctx.measureText) {
|
||||
ctx.measureText = text => {
|
||||
let fontSize = 12;
|
||||
const font = ctx.__font;
|
||||
if (font) {
|
||||
fontSize = parseInt(font.split(' ')[3], 10);
|
||||
}
|
||||
fontSize /= 2;
|
||||
return {
|
||||
width: strLen(text) * fontSize
|
||||
};
|
||||
}
|
||||
}
|
||||
Object.keys(UNI_CANVAS_CONTEXT_MAP).forEach(key => {
|
||||
Object.defineProperty(ctx, key, {
|
||||
set(val) {
|
||||
const name = `set${UNI_CANVAS_CONTEXT_MAP[key]}`;
|
||||
if (!ctx[name]) {
|
||||
return;
|
||||
}
|
||||
if (key === 'font' && fontSizeReg.test(val)) {
|
||||
const match = fontSizeReg.exec(val);
|
||||
ctx[name](match[1]);
|
||||
return;
|
||||
}
|
||||
if (key === 'shadow' && Array.isArray(val)) {
|
||||
ctx[name](...val);
|
||||
return;
|
||||
}
|
||||
if(colorReg.test(val)) {
|
||||
val = val.replace(colorReg, '#$1$1$2$2$3$3')
|
||||
}
|
||||
ctx[name](val);
|
||||
}
|
||||
});
|
||||
});
|
||||
return ctx
|
||||
}
|
||||
15
uni_modules/lime-f2/components/lime-f2/f2.min.js
vendored
Normal file
15
uni_modules/lime-f2/components/lime-f2/f2.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
437
uni_modules/lime-f2/components/lime-f2/index.vue
Normal file
437
uni_modules/lime-f2/components/lime-f2/index.vue
Normal file
@@ -0,0 +1,437 @@
|
||||
<template>
|
||||
<view class="l-f2" :style="customStyle" v-if="canvasId">
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<cover-view class="l-f2__mask" v-if="isMask"></cover-view>
|
||||
<canvas
|
||||
class="l-f2__canvas"
|
||||
v-if="use2dCanvas"
|
||||
type="2d"
|
||||
:id="canvasId"
|
||||
:style="'width:' + width + 'px;height:' + height + 'px'"
|
||||
:disable-scroll="isDisableScroll"
|
||||
@touchstart="touchStart"
|
||||
@touchmove="touchMove"
|
||||
@touchend="touchEnd"
|
||||
/>
|
||||
<canvas
|
||||
class="l-f2__canvas"
|
||||
v-else
|
||||
:width="nodeWidth"
|
||||
:height="nodeHeight"
|
||||
:style="'width:' + width + 'px;height:' + height + 'px'"
|
||||
:canvas-id="canvasId"
|
||||
:id="canvasId"
|
||||
:disable-scroll="isDisableScroll"
|
||||
@touchstart="touchStart"
|
||||
@touchmove="touchMove"
|
||||
@touchend="touchEnd"
|
||||
/>
|
||||
<view v-if="isCloud" style="width:2048px; height:2048px; position: fixed; left: 9999px;">
|
||||
<canvas v-if="use2dCanvas" type="2d" :canvas-id="canvasId + '_cloud'" :id="canvasId + '_cloud'" class="l-f2__canvas"></canvas>
|
||||
<canvas v-else :canvas-id="canvasId + '_cloud'" :id="canvasId + '_cloud'" class="l-f2__canvas"></canvas>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<web-view
|
||||
class="l-f2__canvas"
|
||||
:id="canvasId"
|
||||
ref="webview"
|
||||
:webviewStyles="webviewStyles"
|
||||
src="http://liangei.gitee.io/limeui/hybrid/html/lime-ui/lime-f2/index.html?v=0.4.8"
|
||||
@pagefinish="isFinish = true"
|
||||
@onPostMessage="onMessage"
|
||||
></web-view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
// #ifndef APP-NVUE
|
||||
import extendContext from './canvas';
|
||||
import { compareVersion, wrapEvent, pixelRatio } from './utils';
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
import { base64ToPath } from './utils';
|
||||
// #endif
|
||||
export default {
|
||||
// version: '0.5.1'
|
||||
name: 'l-f2',
|
||||
props: {
|
||||
// #ifdef MP-WEIXIN || MP-TOUTIAO
|
||||
type: {
|
||||
type: String,
|
||||
default: '2d'
|
||||
},
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
webviewStyles: Object,
|
||||
params: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
// #endif
|
||||
customStyle: String,
|
||||
imageMask: String,
|
||||
source: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
isAutoPlay: Boolean,
|
||||
isDisableScroll: Boolean,
|
||||
isCloud: Boolean,
|
||||
onInit: {
|
||||
type: [Function, Object],
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// #ifdef MP-WEIXIN || MP-TOUTIAO
|
||||
use2dCanvas: true,
|
||||
// #endif
|
||||
// #ifndef MP-WEIXIN || MP-TOUTIAO
|
||||
use2dCanvas: false,
|
||||
// #endif
|
||||
// #ifndef APP-NVUE
|
||||
width: null,
|
||||
height: null,
|
||||
nodeWidth: null,
|
||||
nodeHeight: null,
|
||||
isMask: false,
|
||||
isInited: false,
|
||||
imageData: null,
|
||||
config: {},
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
isFinish: false,
|
||||
file: ''
|
||||
// #endif
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
canvasId() {
|
||||
return `l-f2${this._uid}`;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
isAutoPlay(val) {
|
||||
if (val) {
|
||||
this.changeData(this.source);
|
||||
}
|
||||
},
|
||||
source: {
|
||||
handler: function(data) {
|
||||
if (this.isAutoPlay) {
|
||||
this.changeData(data);
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.clear();
|
||||
this.destroy();
|
||||
},
|
||||
created() {
|
||||
this.isMask = this.isCloud && this.imageMask;
|
||||
// #ifdef MP-WEIXIN || MP-TOUTIAO
|
||||
const { SDKVersion, version, platform, environment } = uni.getSystemInfoSync();
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
this.use2dCanvas = this.type === '2d' && compareVersion(SDKVersion, '2.9.2') >= 0 && !((/ios/i.test(platform) && /7.0.20/.test(version)) || /wxwork/i.test(environment));
|
||||
// #endif
|
||||
// #ifdef MP-TOUTIAO
|
||||
this.use2dCanvas = this.type === '2d' && compareVersion(SDKVersion, '1.78.0') >= 0;
|
||||
// #endif
|
||||
},
|
||||
|
||||
async mounted() {
|
||||
if (this.onInit) {
|
||||
this.init(this.onInit);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// #ifdef APP-NVUE
|
||||
onMessage(e) {
|
||||
const res = e?.detail?.data[0] || null;
|
||||
if (res?.event) {
|
||||
this.$emit(res.event, JSON.parse(res.data));
|
||||
} else if (res?.file) {
|
||||
this.file = res.data;
|
||||
} else {
|
||||
console.error(res);
|
||||
}
|
||||
},
|
||||
// #endif
|
||||
async init(func, params = null) {
|
||||
// #ifdef APP-NVUE
|
||||
this.$watch(
|
||||
'isFinish',
|
||||
(n, o) => {
|
||||
(n || o) && (params || this.params) && this.$refs.webview.evalJs(`init(${JSON.stringify(func.toString())}, ${JSON.stringify(params || this.params)})`);
|
||||
this.isInited = true;
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
);
|
||||
// #endif
|
||||
// #ifndef APP-NVUE
|
||||
let config = await this.getContext(this.canvasId);
|
||||
if (this.isCloud) {
|
||||
let imageMask = null;
|
||||
if (this.imageMask) {
|
||||
this.isMask = true;
|
||||
imageMask = await this.getImageMask(config);
|
||||
this.imageData = imageMask;
|
||||
this.isMask = false;
|
||||
}
|
||||
let cloud = await this.getContext(this.canvasId + '_cloud');
|
||||
config = Object.assign({}, config, { cloud, imageMask });
|
||||
}
|
||||
const chart = await func(config);
|
||||
if (chart) {
|
||||
// #ifdef H5 || APP-PLUS
|
||||
chart.repaint();
|
||||
// #endif
|
||||
this.chart = chart;
|
||||
this.canvasEl = chart.get('el');
|
||||
this.isInited = true;
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
changeData(data) {
|
||||
// #ifndef APP-NVUE
|
||||
if (this.chart) {
|
||||
this.chart.changeData(data || this.source);
|
||||
}
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
this.$refs.webview.evalJs(`changeData(${JSON.stringify(data || this.source)})`);
|
||||
// #endif
|
||||
},
|
||||
clear() {
|
||||
// #ifndef APP-NVUE
|
||||
if (this.chart) {
|
||||
this.chart.clear();
|
||||
}
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
this.$refs.webview.evalJs(`clear()`);
|
||||
// #endif
|
||||
},
|
||||
destroy() {
|
||||
// #ifndef APP-NVUE
|
||||
if (this.chart) {
|
||||
this.chart.destroy();
|
||||
}
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
this.$refs.webview.evalJs(`destroy()`);
|
||||
// #endif
|
||||
},
|
||||
repaint() {
|
||||
this.changeData(this.source);
|
||||
},
|
||||
reset(func, params = null) {
|
||||
// #ifndef APP-NVUE
|
||||
this.$watch(
|
||||
'isInited',
|
||||
v => v && func(this.chart),
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
);
|
||||
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
this.$refs.webview.evalJs(`reset(${JSON.stringify(func.toString())}, ${JSON.stringify(params || this.params)})`);
|
||||
// #endif
|
||||
},
|
||||
canvasToTempFilePath(args = {}) {
|
||||
// #ifndef APP-NVUE
|
||||
const { use2dCanvas, canvasId, config } = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
const copyArgs = Object.assign(
|
||||
{
|
||||
canvasId,
|
||||
success: resolve,
|
||||
fail: reject
|
||||
},
|
||||
args
|
||||
);
|
||||
if (use2dCanvas) {
|
||||
let { canvas } = config[canvasId];
|
||||
delete copyArgs.canvasId;
|
||||
copyArgs.canvas = canvas;
|
||||
}
|
||||
uni.canvasToTempFilePath(copyArgs, this);
|
||||
});
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
this.file = '';
|
||||
this.$refs.webview.evalJs(`canvasToTempFilePath()`);
|
||||
return new Promise((resolve, reject) => {
|
||||
this.$watch('file', async file => {
|
||||
if (file) {
|
||||
const tempFilePath = await base64ToPath(file);
|
||||
resolve(args.success({ tempFilePath }));
|
||||
} else {
|
||||
reject(args.fail({ error: `` }));
|
||||
}
|
||||
});
|
||||
});
|
||||
// #endif
|
||||
},
|
||||
// #ifndef APP-NVUE
|
||||
getImageMask(config) {
|
||||
return new Promise(resolve => {
|
||||
uni.getImageInfo({
|
||||
src: this.imageMask,
|
||||
success: async res => {
|
||||
if (res.path) {
|
||||
// #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ || MP-TOUTIAO
|
||||
const localReg = /^\.|^\/(?=[^\/])/;
|
||||
res.path = localReg.test(this.imageMask) ? `/${res.path}` : res.path;
|
||||
// #endif
|
||||
const { context, width, height, canvas } = config;
|
||||
if (this.use2dCanvas) {
|
||||
const imageMask = () => {
|
||||
const imageMask = canvas.createImage();
|
||||
imageMask.crossOrigin = '';
|
||||
imageMask.src = res.path;
|
||||
imageMask.onload = async () => {
|
||||
context.drawImage(imageMask, 0, 0, res.width, res.height, 0, 0, width, height);
|
||||
const imageData = context.getImageData(0, 0, width, height).data;
|
||||
context.clearRect(0, 0, width, height);
|
||||
resolve(imageData);
|
||||
};
|
||||
};
|
||||
imageMask();
|
||||
} else {
|
||||
// #ifndef MP-BAIDU
|
||||
context.drawImage(res.path, 0, 0, res.width, res.height, 0, 0, width, height);
|
||||
// #endif
|
||||
// #ifdef MP-BAIDU
|
||||
context.drawImage(res.path, 0, 0, width, height, 0, 0, res.width, res.height);
|
||||
// #endif
|
||||
await this.canvasDraw(context);
|
||||
const imageData = await context.getImageData(0, 0, width, height);
|
||||
context.clearRect(0, 0, width, height);
|
||||
await this.canvasDraw(context);
|
||||
resolve(imageData);
|
||||
}
|
||||
}
|
||||
},
|
||||
fail(err) {
|
||||
console.error(JSON.stringify(err));
|
||||
resolve(null);
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
canvasDraw(ctx) {
|
||||
return new Promise(resolve => {
|
||||
ctx.draw(false, () => {
|
||||
setTimeout(() => {
|
||||
resolve(true);
|
||||
}, 100);
|
||||
});
|
||||
});
|
||||
},
|
||||
getContext(canvasId) {
|
||||
const { use2dCanvas, type = '2d', config } = this;
|
||||
if (config[canvasId]?.context) {
|
||||
return Promise.resolve(config[canvasId]);
|
||||
}
|
||||
if (use2dCanvas) {
|
||||
return new Promise(resolve => {
|
||||
uni.createSelectorQuery()
|
||||
.in(this)
|
||||
.select(`#${canvasId}`)
|
||||
.fields({
|
||||
node: true,
|
||||
size: true
|
||||
})
|
||||
.exec(res => {
|
||||
let { node, width, height } = res[0];
|
||||
width = width || 300;
|
||||
height = height || 300;
|
||||
const context = node.getContext(type);
|
||||
if (!canvasId.includes('_cloud')) {
|
||||
this.width = width;
|
||||
this.height = height;
|
||||
}
|
||||
node.width = width * pixelRatio;
|
||||
node.height = height * pixelRatio;
|
||||
this.config[canvasId] = { context: extendContext(context), width, height, pixelRatio, canvas: node };
|
||||
resolve(this.config[canvasId]);
|
||||
});
|
||||
});
|
||||
}
|
||||
return new Promise(resolve => {
|
||||
uni.createSelectorQuery()
|
||||
.in(this)
|
||||
.select(`#${canvasId}`)
|
||||
.boundingClientRect()
|
||||
.exec(res => {
|
||||
if (res) {
|
||||
let { width, height } = res[0];
|
||||
width = width || 300;
|
||||
height = height || 300;
|
||||
const context = uni.createCanvasContext(canvasId, this);
|
||||
if (!canvasId.includes('_cloud')) {
|
||||
this.width = width;
|
||||
this.height = height;
|
||||
// #ifdef MP-ALIPAY
|
||||
this.nodeWidth = width * pixelRatio;
|
||||
this.nodeHeight = height * pixelRatio;
|
||||
// #endif
|
||||
}
|
||||
this.config[canvasId] = { context: extendContext(context), width, height, pixelRatio };
|
||||
resolve(this.config[canvasId]);
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
touchStart(e) {
|
||||
if (this.canvasEl) {
|
||||
this.canvasEl.dispatchEvent('touchstart', wrapEvent(e));
|
||||
}
|
||||
},
|
||||
touchMove(e) {
|
||||
if (this.canvasEl) {
|
||||
this.canvasEl.dispatchEvent('touchmove', wrapEvent(e));
|
||||
}
|
||||
},
|
||||
touchEnd(e) {
|
||||
if (this.canvasEl) {
|
||||
this.canvasEl.dispatchEvent('touchend', wrapEvent(e));
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="stylus">
|
||||
full()
|
||||
// #ifndef APP-NVUE
|
||||
width 100%
|
||||
height 100%
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
flex 1
|
||||
// #endif
|
||||
.l-f2
|
||||
full()
|
||||
position relative
|
||||
&__mask
|
||||
position absolute
|
||||
left 0
|
||||
right 0
|
||||
bottom 0
|
||||
top 0
|
||||
background-color #fff
|
||||
z-index 1
|
||||
&__canvas
|
||||
full()
|
||||
</style>
|
||||
65
uni_modules/lime-f2/components/lime-f2/utils.js
Normal file
65
uni_modules/lime-f2/components/lime-f2/utils.js
Normal file
@@ -0,0 +1,65 @@
|
||||
// #ifndef APP-NVUE
|
||||
// 计算版本
|
||||
export function compareVersion(v1, v2) {
|
||||
v1 = v1.split('.')
|
||||
v2 = v2.split('.')
|
||||
const len = Math.max(v1.length, v2.length)
|
||||
while (v1.length < len) {
|
||||
v1.push('0')
|
||||
}
|
||||
while (v2.length < len) {
|
||||
v2.push('0')
|
||||
}
|
||||
for (let i = 0; i < len; i++) {
|
||||
const num1 = parseInt(v1[i], 10)
|
||||
const num2 = parseInt(v2[i], 10)
|
||||
|
||||
if (num1 > num2) {
|
||||
return 1
|
||||
} else if (num1 < num2) {
|
||||
return -1
|
||||
}
|
||||
}
|
||||
return 0
|
||||
}
|
||||
|
||||
export function wrapEvent(e) {
|
||||
if (!e) return;
|
||||
if (!e.preventDefault) {
|
||||
e.preventDefault = function() {};
|
||||
}
|
||||
return e;
|
||||
}
|
||||
|
||||
export const pixelRatio = uni.getSystemInfoSync().pixelRatio
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
export function base64ToPath(base64) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64) || [];
|
||||
const bitmap = new plus.nativeObj.Bitmap('bitmap' + Date.now())
|
||||
bitmap.loadBase64Data(base64, () => {
|
||||
if (!format) {
|
||||
reject(new Error('ERROR_BASE64SRC_PARSE'))
|
||||
}
|
||||
const time = new Date().getTime();
|
||||
const filePath = `_doc/uniapp_temp/${time}.${format}`
|
||||
|
||||
bitmap.save(filePath, {},
|
||||
() => {
|
||||
bitmap.clear()
|
||||
resolve(filePath)
|
||||
},
|
||||
(error) => {
|
||||
bitmap.clear()
|
||||
console.error(`${JSON.stringify(error)}`)
|
||||
reject(error)
|
||||
})
|
||||
}, (error) => {
|
||||
bitmap.clear()
|
||||
console.error(`${JSON.stringify(error)}`)
|
||||
reject(error)
|
||||
})
|
||||
})
|
||||
}
|
||||
// #endif
|
||||
82
uni_modules/lime-f2/package.json
Normal file
82
uni_modules/lime-f2/package.json
Normal file
@@ -0,0 +1,82 @@
|
||||
{
|
||||
"id": "lime-f2",
|
||||
"displayName": "蚂蚁图表 antv F2",
|
||||
"version": "0.5.1",
|
||||
"description": "全端兼容,一个专注于移动,开箱即用的可视化解决方案",
|
||||
"keywords": [
|
||||
"蚂蚁金服",
|
||||
"AntV",
|
||||
"F2",
|
||||
"canvas",
|
||||
"图表"
|
||||
],
|
||||
"repository": "https://gitee.com/liangei/lime-f2",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.0"
|
||||
},
|
||||
"dcloudext": {
|
||||
"category": [
|
||||
"前端组件",
|
||||
"通用组件"
|
||||
],
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": ""
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "u",
|
||||
"Edge": "u",
|
||||
"Firefox": "u",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
}
|
||||
}
|
||||
358
uni_modules/lime-f2/readme.md
Normal file
358
uni_modules/lime-f2/readme.md
Normal file
@@ -0,0 +1,358 @@
|
||||
# F2 图表
|
||||
> F2，一个专注于移动，开箱即用的可视化解决方案 [查看更多](http://liangei.gitee.io/limeui/#/f2)
|
||||
> 基于antv F2 做了兼容处理，更多示例请访问 [uni示例](http://liangei.gitee.io/limeui/#/f2-example) [官方示例](https://f2.antv.vision/zh/examples/gallery)
|
||||
> Q群：1046793420
|
||||
> antv F2 v3.8.7
|
||||
|
||||
|
||||
|
||||
## 平台兼容
|
||||
|
||||
| H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ 小程序 | App |
|
||||
| --- | ---------- | ------------ | ---------- | ---------- | --------- | ---- |
|
||||
| √ | √ | √ | √ | √ | √ | √ |
|
||||
|
||||
|
||||
* ✨ **注意**
|
||||
* 🔔 插件用到了 css 预编译器 [stylus](https://ext.dcloud.net.cn/plugin?name=compile-stylus) 请安装
|
||||
* 🌈 本插件使用了`webview`支持`nvue`。
|
||||
* 📦 本插件没有对F2内部的方法和样式做过改动，只是使其兼容uniapp。
|
||||
* 🔔 若F2无法满足于你或有需要特殊能力的请直接去F2 提建议
|
||||
* 👉 若F2有兼容问题可向我反馈。
|
||||
* 🔔 默认只提供`f2.min.js`,如果需要`f2-all`或`f2-simple`可去码云下载按自已需要引入！
|
||||
|
||||
## 安装
|
||||
在uniapp 插件市场 找到 [蚂蚁图表](https://ext.dcloud.net.cn/plugin?id=4613) 导入即可
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 基础用法
|
||||
通过`ref`获取节点组件内部`init`方法生成图表
|
||||
|
||||
```html
|
||||
<view style="width: 100%; height:500rpx"><l-f2 ref="chart"></l-f2></view>
|
||||
```
|
||||
|
||||
```js
|
||||
// 非 nvue 页面需要引进
|
||||
import F2 from '@/uni_modules/lime-f2/components/lime-f2/f2.min.js';
|
||||
import lF2 from '@/uni_modules/lime-f2/components/lime-f2/'
|
||||
export default {
|
||||
components: {lF2},
|
||||
data() {
|
||||
return {
|
||||
baseData: [{ genre: '成犬粮', sold: 275 }, { genre: '化毛膏', sold: 115 }, { genre: '益生菌', sold: 120 }, { genre: '氨糖', sold: 350 }, { genre: '其它', sold: 150 }],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$refs.chart.init(config => {
|
||||
const chart = new F2.Chart(config);
|
||||
chart.source(this.baseData);
|
||||
chart
|
||||
.interval()
|
||||
.position('genre*sold')
|
||||
.color('genre');
|
||||
chart.render();
|
||||
// 需要把 chart 返回
|
||||
return chart;
|
||||
});
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 图饼
|
||||
图饼示例，更多用法和示例请访问[F2 示例](http://liangei.gitee.io/limeui/#/f2-example)
|
||||
|
||||
```html
|
||||
<view style="width: 100%; height:500rpx"><l-f2 ref="chart"></l-f2></view>
|
||||
```
|
||||
|
||||
```js
|
||||
data() {
|
||||
return {
|
||||
pieMap: {
|
||||
'芳华': '40%',
|
||||
'妖猫传': '20%',
|
||||
'机器之血': '18%',
|
||||
'心理罪': '15%',
|
||||
'寻梦环游记': '5%',
|
||||
'其他': '2%'
|
||||
},
|
||||
pieData: [
|
||||
{
|
||||
name: '芳华',
|
||||
percent: 0.4,
|
||||
a: '1'
|
||||
},
|
||||
{
|
||||
name: '妖猫传',
|
||||
percent: 0.2,
|
||||
a: '1'
|
||||
},
|
||||
{
|
||||
name: '机器之血',
|
||||
percent: 0.18,
|
||||
a: '1'
|
||||
},
|
||||
{
|
||||
name: '心理罪',
|
||||
percent: 0.15,
|
||||
a: '1'
|
||||
},
|
||||
{
|
||||
name: '寻梦环游记',
|
||||
percent: 0.05,
|
||||
a: '1'
|
||||
},
|
||||
{
|
||||
name: '其他',
|
||||
percent: 0.02,
|
||||
a: '1'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$refs.chart.init(config => {
|
||||
const chart = new F2.Chart(config);
|
||||
chart.source(this.pieData, {
|
||||
percent: {
|
||||
formatter: val => val * 100 + '%';
|
||||
}
|
||||
});
|
||||
chart.legend({
|
||||
position: 'right',
|
||||
itemFormatter: val => val + ' ' + this.pieMap[val];
|
||||
});
|
||||
chart.tooltip(false);
|
||||
chart.coord('polar', {
|
||||
transposed: true,
|
||||
radius: 0.85
|
||||
});
|
||||
chart.axis(false);
|
||||
chart
|
||||
.interval()
|
||||
.position('a*percent')
|
||||
.color('name', ['#1890FF', '#13C2C2', '#2FC25B', '#FACC14', '#F04864', '#8543E0'])
|
||||
.adjust('stack')
|
||||
.style({
|
||||
lineWidth: 1,
|
||||
stroke: '#fff',
|
||||
lineJoin: 'round',
|
||||
lineCap: 'round'
|
||||
})
|
||||
.animate({
|
||||
appear: {
|
||||
duration: 1200,
|
||||
easing: 'bounceOut'
|
||||
}
|
||||
});
|
||||
chart.render();
|
||||
// 需要把 chart 返回
|
||||
return chart;
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
### 数据更新
|
||||
> F2 更新数据的方式有三种：
|
||||
|
||||
|
||||
1、通过 `ref` 获取组件实例，使用内部方法`changeData(data)`更新数据
|
||||
- 前后数据结构不发生变化，需要马上更新图表。
|
||||
```js
|
||||
this.$refs.chart.changeData(data)
|
||||
```
|
||||
|
||||
2、在节点上设置 `source` 源数据和 `isAutoPlay` 自动更新。
|
||||
- 前后数据结构不发生变化，需要马上更新图表。
|
||||
```html
|
||||
<view style="width: 100%; height:500rpx"><l-f2 ref="chart" :source="data" is-auto-play></l-f2></view>
|
||||
```
|
||||
|
||||
```js
|
||||
data() {
|
||||
return {
|
||||
data: [{ genre: '成犬粮', sold: 275 }, { genre: '化毛膏', sold: 115 }, { genre: '益生菌', sold: 120 }, { genre: '氨糖', sold: 350 }, { genre: '其它', sold: 150 }],
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
3、如果仅仅是更新数据，而不需要马上更新图表，在节点上设置 `source` 源数据，然后在需要更新图表时调用内部方法 `repaint()` 或在节点上设置 `isAutoPlay` 为 `true`
|
||||
- 前后数据结构不发生变化，不需要立即更新数据
|
||||
```html
|
||||
<view style="width: 100%; height:500rpx"><l-f2 ref="chart" :source="data" :isAutoPlay="isAutoPlay"></l-f2></view>
|
||||
```
|
||||
|
||||
```js
|
||||
// 1 调用内部方法
|
||||
this.$refs.chart.repaint();
|
||||
// 2 先设置isAutoPlay为false,再需要时设置为true
|
||||
this.isAutoPlay = true
|
||||
```
|
||||
|
||||
4、更新数据时还可以清除图表上的所有元素，重新定义图形语法，改变图表类型和各种配置。
|
||||
- 前后数据结构发生变化 或 需要更改text等元素。
|
||||
|
||||
```js
|
||||
this.$refs.chart.reset(chart => {
|
||||
const baseData = [{ genre: '成犬粮', sold: 375 }, { genre: '化毛膏', sold: 15 }, { genre: '益生菌', sold: 20 }, { genre: '氨糖', sold: 240 }, { genre: '其它', sold: 150 }];
|
||||
chart.clear() // 清理所有
|
||||
chart.source(baseData); // 加载新数据
|
||||
chart.interval().position('genre*sold').color('sold'); // 重新定义图形语法
|
||||
chart.render();
|
||||
return chart;
|
||||
})
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
### Nvue
|
||||
本插件通过`webview`组件使得 `antv F2` 能在`nvue`里使用。
|
||||
|
||||
* ✨ **温馨提示**
|
||||
* 👉 webview使用了网络路径，可自行下载放置根目录下的`hybrid`文件夹里再修改路径即可。
|
||||
* 🛡 **不需要引进F2 JS文件**
|
||||
* ⚙️ 在函数外面的数据需要通过`init`方法的第二个参数传递数据
|
||||
|
||||
```html
|
||||
<view class="f2"><l-f2 ref="chart"></l-f2></view>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
baseData: [{ genre: '成犬粮', sold: 275 }, { genre: '化毛膏', sold: 115 }, { genre: '益生菌', sold: 120 }, { genre: '氨糖', sold: 350 }, { genre: '其它', sold: 150 }],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$refs.chart.init(config => {
|
||||
const chart = new F2.Chart(config);
|
||||
// 在函数外面的数据，需要在第二个参数传进去。
|
||||
// 数据名保持跟this里的一致
|
||||
chart.source(baseData);
|
||||
chart
|
||||
.interval()
|
||||
.position('genre*sold')
|
||||
.color('genre');
|
||||
chart.render();
|
||||
return chart;
|
||||
},
|
||||
// 在函数外面的数据需要传进组件
|
||||
{baseData: this.baseData}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
## Nvue 使用注意事项
|
||||
- 由于 nvue 使用的是字符串模板传输，打包的时候会被混淆压缩
|
||||
- 所在要保持 **关键词** 不被 **混淆压缩**
|
||||
|
||||
#### 1、F2、DataSet 不需要被引入
|
||||
|
||||
👎 错误
|
||||
|
||||
```js
|
||||
import F2 from '@/uni_modules/lime-f2/components/lime-f2/f2-all.min.js';
|
||||
import DataSet from '@/antv/DataSet'
|
||||
export default {
|
||||
...code
|
||||
}
|
||||
```
|
||||
|
||||
👍 正确
|
||||
|
||||
```js
|
||||
export default {
|
||||
...code
|
||||
}
|
||||
```
|
||||
|
||||
#### 2、引用函数外面数据的**关键词**不需要声明
|
||||
|
||||
👎 错误
|
||||
|
||||
```js
|
||||
const {data} = this
|
||||
this.$refs.chart.init(config => {
|
||||
chart.source(data);
|
||||
})
|
||||
|
||||
```
|
||||
|
||||
👍 正确
|
||||
|
||||
```js
|
||||
// 所有用函数外里的数据，只要保持跟 this 里的一致
|
||||
this.$refs.chart.init(config => {
|
||||
chart.source(data);
|
||||
})
|
||||
|
||||
- or -
|
||||
|
||||
this.$refs.chart.init(config => {
|
||||
chart.source(this.data);
|
||||
})
|
||||
```
|
||||
|
||||
#### 3、引用函数外面的数据需要通过**params**或函数的第二个参数传递
|
||||
|
||||
👎 错误
|
||||
|
||||
```html
|
||||
<l-f2 />
|
||||
|
||||
- or -
|
||||
|
||||
this.$refs.chart.init(config => {...code})
|
||||
```
|
||||
|
||||
👍 正确
|
||||
|
||||
```html
|
||||
<l-f2 :params="{data}"/>
|
||||
|
||||
- or -
|
||||
|
||||
this.$refs.chart.init(config => {...code}, {data: this.data})
|
||||
```
|
||||
|
||||
## 不支持的功能
|
||||
- 目前由于小程序不支持 `document`，所以 `Guide.Html` 辅助元素组件目前仍无法使用，其他 F2 的功能全部支持。
|
||||
- **Nvue**是通过`webview`实现的,所以它不受影响！
|
||||
- **H5** uni官方 `canvas` 模拟了 小程序 所以也不支持 。
|
||||
- 缩放手势暂时不支持，因为原厂也不支持小程序，将来如果有需要考虑修改源码。
|
||||
- 词云原厂也是不支持小程序，本插件修改源码使得支持，但头条小程序需要1.78.0以后。
|
||||
|
||||
|
||||
## Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --------------- | -------- | ------- | ------------ | ----- |
|
||||
| custom-style | 自定义样式 | `string` | - | - |
|
||||
| params | 仅针对nvue的数据传递,同init函数的第二个参数，两选一 | `object` | - | - |
|
||||
| webviewStyles | 仅针对nvue的webview设置样式 | `object` | - | - |
|
||||
| source | 图表数据 | `array` | - | 0.3.0 |
|
||||
| type | canvas 类型 2d 仅针对微信和头条有效 | `string` | `2d` | 0.3.0 |
|
||||
| isAutoPlay | 设置了上方的 图表数据 再 设置本参数 ，只要数据发生改动就更新图表 | `boolean` | `false` | 0.3.0 |
|
||||
| is-disable-scroll | 触摸图表时是否禁止页面滚动 | `boolean` | `false` | |
|
||||
|
||||
## 事件
|
||||
|
||||
| 参数 | 说明 |
|
||||
| --------------- | --------------- |
|
||||
| init(callback, data) | **callback**: 回调函数 **data**: `nvue` 如果使用了外部数据，需要传递 |
|
||||
| changeData(data) | 更新数据 ，传递是数据数组 |
|
||||
| clear() | 清除所有 |
|
||||
| destroy() | 销毁实例 |
|
||||
| repaint() | 用于暂时只更新数据，等需要时再调用重绘 |
|
||||
| reset(callback, data) | 重新定义图形语法，改变图表类型和各种配置, **callback**: 回调函数 **data**: `nvue` 如果使用了外部数据，需要传递 |
|
||||
| canvasToTempFilePath(opt) | 用于生成图片 |
|
||||
|
||||
## 打赏
|
||||
如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。
|
||||
|
||||
|
||||
8
uni_modules/uni-icons/changelog.md
Normal file
8
uni_modules/uni-icons/changelog.md
Normal file
@@ -0,0 +1,8 @@
|
||||
## 1.2.1（2021-09-17）
|
||||
- 新增 支持使用 css 图标库扩展组件（仅 vue 支持）
|
||||
## 1.2.0（2021-07-30）
|
||||
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||
## 1.1.5（2021-05-12）
|
||||
- 新增 组件示例地址
|
||||
## 1.1.4（2021-02-05）
|
||||
- 调整为uni_modules目录规范
|
||||
132
uni_modules/uni-icons/components/uni-icons/icons.js
Normal file
132
uni_modules/uni-icons/components/uni-icons/icons.js
Normal file
@@ -0,0 +1,132 @@
|
||||
export default {
|
||||
"pulldown": "\ue588",
|
||||
"refreshempty": "\ue461",
|
||||
"back": "\ue471",
|
||||
"forward": "\ue470",
|
||||
"more": "\ue507",
|
||||
"more-filled": "\ue537",
|
||||
"scan": "\ue612",
|
||||
"qq": "\ue264",
|
||||
"weibo": "\ue260",
|
||||
"weixin": "\ue261",
|
||||
"pengyouquan": "\ue262",
|
||||
"loop": "\ue565",
|
||||
"refresh": "\ue407",
|
||||
"refresh-filled": "\ue437",
|
||||
"arrowthindown": "\ue585",
|
||||
"arrowthinleft": "\ue586",
|
||||
"arrowthinright": "\ue587",
|
||||
"arrowthinup": "\ue584",
|
||||
"undo-filled": "\ue7d6",
|
||||
"undo": "\ue406",
|
||||
"redo": "\ue405",
|
||||
"redo-filled": "\ue7d9",
|
||||
"bars": "\ue563",
|
||||
"chatboxes": "\ue203",
|
||||
"camera": "\ue301",
|
||||
"chatboxes-filled": "\ue233",
|
||||
"camera-filled": "\ue7ef",
|
||||
"cart-filled": "\ue7f4",
|
||||
"cart": "\ue7f5",
|
||||
"checkbox-filled": "\ue442",
|
||||
"checkbox": "\ue7fa",
|
||||
"arrowleft": "\ue582",
|
||||
"arrowdown": "\ue581",
|
||||
"arrowright": "\ue583",
|
||||
"smallcircle-filled": "\ue801",
|
||||
"arrowup": "\ue580",
|
||||
"circle": "\ue411",
|
||||
"eye-filled": "\ue568",
|
||||
"eye-slash-filled": "\ue822",
|
||||
"eye-slash": "\ue823",
|
||||
"eye": "\ue824",
|
||||
"flag-filled": "\ue825",
|
||||
"flag": "\ue508",
|
||||
"gear-filled": "\ue532",
|
||||
"reload": "\ue462",
|
||||
"gear": "\ue502",
|
||||
"hand-thumbsdown-filled": "\ue83b",
|
||||
"hand-thumbsdown": "\ue83c",
|
||||
"hand-thumbsup-filled": "\ue83d",
|
||||
"heart-filled": "\ue83e",
|
||||
"hand-thumbsup": "\ue83f",
|
||||
"heart": "\ue840",
|
||||
"home": "\ue500",
|
||||
"info": "\ue504",
|
||||
"home-filled": "\ue530",
|
||||
"info-filled": "\ue534",
|
||||
"circle-filled": "\ue441",
|
||||
"chat-filled": "\ue847",
|
||||
"chat": "\ue263",
|
||||
"mail-open-filled": "\ue84d",
|
||||
"email-filled": "\ue231",
|
||||
"mail-open": "\ue84e",
|
||||
"email": "\ue201",
|
||||
"checkmarkempty": "\ue472",
|
||||
"list": "\ue562",
|
||||
"locked-filled": "\ue856",
|
||||
"locked": "\ue506",
|
||||
"map-filled": "\ue85c",
|
||||
"map-pin": "\ue85e",
|
||||
"map-pin-ellipse": "\ue864",
|
||||
"map": "\ue364",
|
||||
"minus-filled": "\ue440",
|
||||
"mic-filled": "\ue332",
|
||||
"minus": "\ue410",
|
||||
"micoff": "\ue360",
|
||||
"mic": "\ue302",
|
||||
"clear": "\ue434",
|
||||
"smallcircle": "\ue868",
|
||||
"close": "\ue404",
|
||||
"closeempty": "\ue460",
|
||||
"paperclip": "\ue567",
|
||||
"paperplane": "\ue503",
|
||||
"paperplane-filled": "\ue86e",
|
||||
"person-filled": "\ue131",
|
||||
"contact-filled": "\ue130",
|
||||
"person": "\ue101",
|
||||
"contact": "\ue100",
|
||||
"images-filled": "\ue87a",
|
||||
"phone": "\ue200",
|
||||
"images": "\ue87b",
|
||||
"image": "\ue363",
|
||||
"image-filled": "\ue877",
|
||||
"location-filled": "\ue333",
|
||||
"location": "\ue303",
|
||||
"plus-filled": "\ue439",
|
||||
"plus": "\ue409",
|
||||
"plusempty": "\ue468",
|
||||
"help-filled": "\ue535",
|
||||
"help": "\ue505",
|
||||
"navigate-filled": "\ue884",
|
||||
"navigate": "\ue501",
|
||||
"mic-slash-filled": "\ue892",
|
||||
"search": "\ue466",
|
||||
"settings": "\ue560",
|
||||
"sound": "\ue590",
|
||||
"sound-filled": "\ue8a1",
|
||||
"spinner-cycle": "\ue465",
|
||||
"download-filled": "\ue8a4",
|
||||
"personadd-filled": "\ue132",
|
||||
"videocam-filled": "\ue8af",
|
||||
"personadd": "\ue102",
|
||||
"upload": "\ue402",
|
||||
"upload-filled": "\ue8b1",
|
||||
"starhalf": "\ue463",
|
||||
"star-filled": "\ue438",
|
||||
"star": "\ue408",
|
||||
"trash": "\ue401",
|
||||
"phone-filled": "\ue230",
|
||||
"compose": "\ue400",
|
||||
"videocam": "\ue300",
|
||||
"trash-filled": "\ue8dc",
|
||||
"download": "\ue403",
|
||||
"chatbubble-filled": "\ue232",
|
||||
"chatbubble": "\ue202",
|
||||
"cloud-download": "\ue8e4",
|
||||
"cloud-upload-filled": "\ue8e5",
|
||||
"cloud-upload": "\ue8e6",
|
||||
"cloud-download-filled": "\ue8e9",
|
||||
"headphones":"\ue8bf",
|
||||
"shop":"\ue609"
|
||||
}
|
||||
72
uni_modules/uni-icons/components/uni-icons/uni-icons.vue
Normal file
72
uni_modules/uni-icons/components/uni-icons/uni-icons.vue
Normal file
File diff suppressed because one or more lines are too long
BIN
uni_modules/uni-icons/components/uni-icons/uni.ttf
Normal file
BIN
uni_modules/uni-icons/components/uni-icons/uni.ttf
Normal file
Binary file not shown.
86
uni_modules/uni-icons/package.json
Normal file
86
uni_modules/uni-icons/package.json
Normal file
@@ -0,0 +1,86 @@
|
||||
{
|
||||
"id": "uni-icons",
|
||||
"displayName": "uni-icons 图标",
|
||||
"version": "1.2.1",
|
||||
"description": "图标组件，用于展示移动端常见的图标，可自定义颜色、大小。",
|
||||
"keywords": [
|
||||
"uni-ui",
|
||||
"uniui",
|
||||
"icon",
|
||||
"图标"
|
||||
],
|
||||
"repository": "https://github.com/dcloudio/uni-ui",
|
||||
"engines": {
|
||||
"HBuilderX": ""
|
||||
},
|
||||
"directories": {
|
||||
"example": "../../temps/example_temps"
|
||||
},
|
||||
"dcloudext": {
|
||||
"category": [
|
||||
"前端组件",
|
||||
"通用组件"
|
||||
],
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
},
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
64
uni_modules/uni-icons/readme.md
Normal file
64
uni_modules/uni-icons/readme.md
Normal file
@@ -0,0 +1,64 @@
|
||||
|
||||
|
||||
## Icons 图标
|
||||
> **组件名：uni-icons**
|
||||
> 代码块： `uIcons`
|
||||
|
||||
|
||||
用于展示 icons 图标 。
|
||||
|
||||
### 安装方式
|
||||
|
||||
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范，`HBuilderX 2.5.5`起，只需将本组件导入项目，在页面`template`中即可直接使用，无需在页面中`import`和注册`components`。
|
||||
|
||||
如需通过`npm`方式使用`uni-ui`组件，另见文档：[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
|
||||
|
||||
### 基本用法
|
||||
|
||||
在 ``template`` 中使用组件
|
||||
|
||||
```html
|
||||
<uni-icons type="contact" size="30"></uni-icons>
|
||||
```
|
||||
|
||||
### 扩展图标用法
|
||||
|
||||
1. 需要自行在项目 App.vue 中引入 css 图标扩展库（注意: css 图标库引用的 .ttf 文件路径是否正确）
|
||||
|
||||
```html
|
||||
<style lang="scss">
|
||||
/* 扩展图标库 */
|
||||
@import '@/static/iconfont.css';
|
||||
</style>
|
||||
```
|
||||
2. 在 ``template`` 中使用组件
|
||||
|
||||
```html
|
||||
<uni-icons class="mr-30" type="icon-kongxincai" font-family="iconfont" color="#007AFF" size="20"></uni-icons>
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
## API
|
||||
|
||||
### Icons Props
|
||||
|
||||
|属性名 |类型 |默认值 |说明 |
|
||||
|:-: |:-: |:-: |:-: |
|
||||
|size |Number |24 |图标大小 |
|
||||
|type |String |- |图标图案，参考示例 |
|
||||
|color |String |- |图标颜色 |
|
||||
|font-family(仅 vue 支持) |String |uniicons |图标库字体家族 |
|
||||
|
||||
|
||||
### Icons Events
|
||||
|事件名 |说明 |返回值|
|
||||
|:-: |:-: |:-: |
|
||||
|@click|点击 Icon 触发事件|- |
|
||||
|
||||
|
||||
|
||||
## 组件示例
|
||||
|
||||
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/icons/icons](https://hellouniapp.dcloud.net.cn/pages/extUI/icons/icons)
|
||||
37
uni_modules/uni-popup/changelog.md
Normal file
37
uni_modules/uni-popup/changelog.md
Normal file
@@ -0,0 +1,37 @@
|
||||
## 1.6.2（2021-08-24）
|
||||
- 新增 支持国际化
|
||||
## 1.6.1（2021-07-30）
|
||||
- 优化 vue3下事件警告的问题
|
||||
## 1.6.0（2021-07-13）
|
||||
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||
## 1.5.0（2021-06-23）
|
||||
- 新增 mask-click 遮罩层点击事件
|
||||
## 1.4.5（2021-06-22）
|
||||
- 修复 nvue 平台中间弹出后，点击内容，再点击遮罩无法关闭的Bug
|
||||
## 1.4.4（2021-06-18）
|
||||
- 修复 H5平台中间弹出后，点击内容，再点击遮罩无法关闭的Bug
|
||||
## 1.4.3（2021-06-08）
|
||||
- 修复 错误的 watch 字段
|
||||
- 修复 safeArea 属性不生效的问题
|
||||
- 修复 点击内容，再点击遮罩无法关闭的Bug
|
||||
## 1.4.2（2021-05-12）
|
||||
- 新增 组件示例地址
|
||||
## 1.4.1（2021-04-29）
|
||||
- 修复 组件内放置 input 、textarea 组件，无法聚焦的问题
|
||||
## 1.4.0 （2021-04-29）
|
||||
- 新增 type 属性的 left\right 值，支持左右弹出
|
||||
- 新增 open(String:type) 方法参数 ，可以省略 type 属性 ，直接传入类型打开指定弹窗
|
||||
- 新增 backgroundColor 属性，可定义主窗口背景色,默认不显示背景色
|
||||
- 新增 safeArea 属性，是否适配底部安全区
|
||||
- 修复 App\h5\微信小程序底部安全区占位不对的Bug
|
||||
- 修复 App 端弹出等待的Bug
|
||||
- 优化 提升低配设备性能，优化动画卡顿问题
|
||||
- 优化 更简单的组件自定义方式
|
||||
## 1.2.9（2021-02-05）
|
||||
- 优化 组件引用关系，通过uni_modules引用组件
|
||||
## 1.2.8（2021-02-05）
|
||||
- 调整为uni_modules目录规范
|
||||
## 1.2.7（2021-02-05）
|
||||
- 调整为uni_modules目录规范
|
||||
- 新增 支持 PC 端
|
||||
- 新增 uni-popup-message 、uni-popup-dialog扩展组件支持 PC 端
|
||||
@@ -0,0 +1,45 @@
|
||||
// #ifdef H5
|
||||
export default {
|
||||
name: 'Keypress',
|
||||
props: {
|
||||
disable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
const keyNames = {
|
||||
esc: ['Esc', 'Escape'],
|
||||
tab: 'Tab',
|
||||
enter: 'Enter',
|
||||
space: [' ', 'Spacebar'],
|
||||
up: ['Up', 'ArrowUp'],
|
||||
left: ['Left', 'ArrowLeft'],
|
||||
right: ['Right', 'ArrowRight'],
|
||||
down: ['Down', 'ArrowDown'],
|
||||
delete: ['Backspace', 'Delete', 'Del']
|
||||
}
|
||||
const listener = ($event) => {
|
||||
if (this.disable) {
|
||||
return
|
||||
}
|
||||
const keyName = Object.keys(keyNames).find(key => {
|
||||
const keyName = $event.key
|
||||
const value = keyNames[key]
|
||||
return value === keyName || (Array.isArray(value) && value.includes(keyName))
|
||||
})
|
||||
if (keyName) {
|
||||
// 避免和其他按键事件冲突
|
||||
setTimeout(() => {
|
||||
this.$emit(keyName, {})
|
||||
}, 0)
|
||||
}
|
||||
}
|
||||
document.addEventListener('keyup', listener)
|
||||
this.$once('hook:beforeDestroy', () => {
|
||||
document.removeEventListener('keyup', listener)
|
||||
})
|
||||
},
|
||||
render: () => {}
|
||||
}
|
||||
// #endif
|
||||
@@ -0,0 +1,263 @@
|
||||
<template>
|
||||
<view class="uni-popup-dialog">
|
||||
<view class="uni-dialog-title">
|
||||
<text class="uni-dialog-title-text" :class="['uni-popup__'+dialogType]">{{titleText}}</text>
|
||||
</view>
|
||||
<view v-if="mode === 'base'" class="uni-dialog-content">
|
||||
<slot>
|
||||
<text class="uni-dialog-content-text">{{content}}</text>
|
||||
</slot>
|
||||
</view>
|
||||
<view v-else class="uni-dialog-content">
|
||||
<slot>
|
||||
<input class="uni-dialog-input" v-model="val" type="text" :placeholder="placeholderText" :focus="focus" >
|
||||
</slot>
|
||||
</view>
|
||||
<view class="uni-dialog-button-group">
|
||||
<view class="uni-dialog-button" @click="closeDialog">
|
||||
<text class="uni-dialog-button-text">{{cancelText}}</text>
|
||||
</view>
|
||||
<view class="uni-dialog-button uni-border-left" @click="onOk">
|
||||
<text class="uni-dialog-button-text uni-button-color">{{okText}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import popup from '../uni-popup/popup.js'
|
||||
import {
|
||||
initVueI18n
|
||||
} from '@dcloudio/uni-i18n'
|
||||
import messages from '../uni-popup/i18n/index.js'
|
||||
const { t } = initVueI18n(messages)
|
||||
/**
|
||||
* PopUp 弹出层-对话框样式
|
||||
* @description 弹出层-对话框样式
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
|
||||
* @property {String} value input 模式下的默认值
|
||||
* @property {String} placeholder input 模式下输入提示
|
||||
* @property {String} type = [success|warning|info|error] 主题样式
|
||||
* @value success 成功
|
||||
* @value warning 提示
|
||||
* @value info 消息
|
||||
* @value error 错误
|
||||
* @property {String} mode = [base|input] 模式、
|
||||
* @value base 基础对话框
|
||||
* @value input 可输入对话框
|
||||
* @property {String} content 对话框内容
|
||||
* @property {Boolean} beforeClose 是否拦截取消事件
|
||||
* @event {Function} confirm 点击确认按钮触发
|
||||
* @event {Function} close 点击取消按钮触发
|
||||
*/
|
||||
|
||||
export default {
|
||||
name: "uniPopupDialog",
|
||||
mixins: [popup],
|
||||
emits:['confirm','close'],
|
||||
props: {
|
||||
value: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
placeholder: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'error'
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'base'
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
content: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
beforeClose: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogType: 'error',
|
||||
focus: false,
|
||||
val: ""
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
okText() {
|
||||
return t("uni-popup.ok")
|
||||
},
|
||||
cancelText() {
|
||||
return t("uni-popup.cancel")
|
||||
},
|
||||
placeholderText() {
|
||||
return this.placeholder || t("uni-popup.placeholder")
|
||||
},
|
||||
titleText() {
|
||||
return this.title || t("uni-popup.title")
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
type(val) {
|
||||
this.dialogType = val
|
||||
},
|
||||
mode(val) {
|
||||
if (val === 'input') {
|
||||
this.dialogType = 'info'
|
||||
}
|
||||
},
|
||||
value(val) {
|
||||
this.val = val
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 对话框遮罩不可点击
|
||||
this.popup.disableMask()
|
||||
// this.popup.closeMask()
|
||||
if (this.mode === 'input') {
|
||||
this.dialogType = 'info'
|
||||
this.val = this.value
|
||||
} else {
|
||||
this.dialogType = this.type
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.focus = true
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 点击确认按钮
|
||||
*/
|
||||
onOk() {
|
||||
if (this.mode === 'input'){
|
||||
this.$emit('confirm', this.val)
|
||||
}else{
|
||||
this.$emit('confirm')
|
||||
}
|
||||
if(this.beforeClose) return
|
||||
this.popup.close()
|
||||
},
|
||||
/**
|
||||
* 点击取消按钮
|
||||
*/
|
||||
closeDialog() {
|
||||
this.$emit('close')
|
||||
if(this.beforeClose) return
|
||||
this.popup.close()
|
||||
},
|
||||
close(){
|
||||
this.popup.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.uni-popup-dialog {
|
||||
width: 300px;
|
||||
border-radius: 15px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.uni-dialog-title {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.uni-dialog-title-text {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.uni-dialog-content {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 5px 15px 15px 15px;
|
||||
}
|
||||
|
||||
.uni-dialog-content-text {
|
||||
font-size: 14px;
|
||||
color: #6e6e6e;
|
||||
}
|
||||
|
||||
.uni-dialog-button-group {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
border-top-color: #f5f5f5;
|
||||
border-top-style: solid;
|
||||
border-top-width: 1px;
|
||||
}
|
||||
|
||||
.uni-dialog-button {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.uni-border-left {
|
||||
border-left-color: #f0f0f0;
|
||||
border-left-style: solid;
|
||||
border-left-width: 1px;
|
||||
}
|
||||
|
||||
.uni-dialog-button-text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.uni-button-color {
|
||||
color: #007aff;
|
||||
}
|
||||
|
||||
.uni-dialog-input {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
border: 1px #eee solid;
|
||||
height: 40px;
|
||||
padding: 0 10px;
|
||||
border-radius: 5px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.uni-popup__success {
|
||||
color: #4cd964;
|
||||
}
|
||||
|
||||
.uni-popup__warn {
|
||||
color: #f0ad4e;
|
||||
}
|
||||
|
||||
.uni-popup__error {
|
||||
color: #dd524d;
|
||||
}
|
||||
|
||||
.uni-popup__info {
|
||||
color: #909399;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,143 @@
|
||||
<template>
|
||||
<view class="uni-popup-message">
|
||||
<view class="uni-popup-message__box fixforpc-width" :class="'uni-popup__'+type">
|
||||
<slot>
|
||||
<text class="uni-popup-message-text" :class="'uni-popup__'+type+'-text'">{{message}}</text>
|
||||
</slot>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import popup from '../uni-popup/popup.js'
|
||||
/**
|
||||
* PopUp 弹出层-消息提示
|
||||
* @description 弹出层-消息提示
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
|
||||
* @property {String} type = [success|warning|info|error] 主题样式
|
||||
* @value success 成功
|
||||
* @value warning 提示
|
||||
* @value info 消息
|
||||
* @value error 错误
|
||||
* @property {String} message 消息提示文字
|
||||
* @property {String} duration 显示时间，设置为 0 则不会自动关闭
|
||||
*/
|
||||
|
||||
export default {
|
||||
name: 'uniPopupMessage',
|
||||
mixins:[popup],
|
||||
props: {
|
||||
/**
|
||||
* 主题 success/warning/info/error 默认 success
|
||||
*/
|
||||
type: {
|
||||
type: String,
|
||||
default: 'success'
|
||||
},
|
||||
/**
|
||||
* 消息文字
|
||||
*/
|
||||
message: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
/**
|
||||
* 显示时间，设置为 0 则不会自动关闭
|
||||
*/
|
||||
duration: {
|
||||
type: Number,
|
||||
default: 3000
|
||||
},
|
||||
maskShow:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
created() {
|
||||
this.popup.maskShow = this.maskShow
|
||||
this.popup.messageChild = this
|
||||
},
|
||||
methods: {
|
||||
timerClose(){
|
||||
if(this.duration === 0) return
|
||||
clearTimeout(this.timer)
|
||||
this.timer = setTimeout(()=>{
|
||||
this.popup.close()
|
||||
},this.duration)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.uni-popup-message {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.uni-popup-message__box {
|
||||
background-color: #e1f3d8;
|
||||
padding: 10px 15px;
|
||||
border-color: #eee;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 500px) {
|
||||
.fixforpc-width {
|
||||
margin-top: 20px;
|
||||
border-radius: 4px;
|
||||
flex: none;
|
||||
min-width: 380px;
|
||||
/* #ifndef APP-NVUE */
|
||||
max-width: 50%;
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
max-width: 500px;
|
||||
/* #endif */
|
||||
}
|
||||
}
|
||||
|
||||
.uni-popup-message-text {
|
||||
font-size: 14px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.uni-popup__success {
|
||||
background-color: #e1f3d8;
|
||||
}
|
||||
|
||||
.uni-popup__success-text {
|
||||
color: #67C23A;
|
||||
}
|
||||
|
||||
.uni-popup__warn {
|
||||
background-color: #faecd8;
|
||||
}
|
||||
|
||||
.uni-popup__warn-text {
|
||||
color: #E6A23C;
|
||||
}
|
||||
|
||||
.uni-popup__error {
|
||||
background-color: #fde2e2;
|
||||
}
|
||||
|
||||
.uni-popup__error-text {
|
||||
color: #F56C6C;
|
||||
}
|
||||
|
||||
.uni-popup__info {
|
||||
background-color: #F2F6FC;
|
||||
}
|
||||
|
||||
.uni-popup__info-text {
|
||||
color: #909399;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,185 @@
|
||||
<template>
|
||||
<view class="uni-popup-share">
|
||||
<view class="uni-share-title"><text class="uni-share-title-text">{{shareTitleText}}</text></view>
|
||||
<view class="uni-share-content">
|
||||
<view class="uni-share-content-box">
|
||||
<view class="uni-share-content-item" v-for="(item,index) in bottomData" :key="index" @click.stop="select(item,index)">
|
||||
<image class="uni-share-image" :src="item.icon" mode="aspectFill"></image>
|
||||
<text class="uni-share-text">{{item.text}}</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-share-button-box">
|
||||
<button class="uni-share-button" @click="close">{{cancelText}}</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import popup from '../uni-popup/popup.js'
|
||||
import {
|
||||
initVueI18n
|
||||
} from '@dcloudio/uni-i18n'
|
||||
import messages from '../uni-popup/i18n/index.js'
|
||||
const { t } = initVueI18n(messages)
|
||||
export default {
|
||||
name: 'UniPopupShare',
|
||||
mixins:[popup],
|
||||
emits:['select'],
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
beforeClose: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
bottomData: [{
|
||||
text: '微信',
|
||||
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/c2b17470-50be-11eb-b680-7980c8a877b8.png',
|
||||
name: 'wx'
|
||||
},
|
||||
{
|
||||
text: '支付宝',
|
||||
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/d684ae40-50be-11eb-8ff1-d5dcf8779628.png',
|
||||
name: 'wx'
|
||||
},
|
||||
{
|
||||
text: 'QQ',
|
||||
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/e7a79520-50be-11eb-b997-9918a5dda011.png',
|
||||
name: 'qq'
|
||||
},
|
||||
{
|
||||
text: '新浪',
|
||||
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/0dacdbe0-50bf-11eb-8ff1-d5dcf8779628.png',
|
||||
name: 'sina'
|
||||
},
|
||||
{
|
||||
text: '百度',
|
||||
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/1ec6e920-50bf-11eb-8a36-ebb87efcf8c0.png',
|
||||
name: 'copy'
|
||||
},
|
||||
{
|
||||
text: '其他',
|
||||
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/2e0fdfe0-50bf-11eb-b997-9918a5dda011.png',
|
||||
name: 'more'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
computed: {
|
||||
cancelText() {
|
||||
return t("uni-popup.cancel")
|
||||
},
|
||||
shareTitleText() {
|
||||
return this.title || t("uni-popup.shareTitle")
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 选择内容
|
||||
*/
|
||||
select(item, index) {
|
||||
this.$emit('select', {
|
||||
item,
|
||||
index
|
||||
})
|
||||
this.close()
|
||||
|
||||
},
|
||||
/**
|
||||
* 关闭窗口
|
||||
*/
|
||||
close() {
|
||||
if(this.beforeClose) return
|
||||
this.popup.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.uni-popup-share {
|
||||
background-color: #fff;
|
||||
}
|
||||
.uni-share-title {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 40px;
|
||||
}
|
||||
.uni-share-title-text {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
.uni-share-content {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.uni-share-content-box {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
width: 360px;
|
||||
}
|
||||
|
||||
.uni-share-content-item {
|
||||
width: 90px;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 10px 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.uni-share-content-item:active {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.uni-share-image {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.uni-share-text {
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
color: #3B4144;
|
||||
}
|
||||
|
||||
.uni-share-button-box {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
.uni-share-button {
|
||||
flex: 1;
|
||||
border-radius: 50px;
|
||||
color: #666;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.uni-share-button::after {
|
||||
border-radius: 50px;
|
||||
}
|
||||
</style>
|
||||
7
uni_modules/uni-popup/components/uni-popup/i18n/en.json
Normal file
7
uni_modules/uni-popup/components/uni-popup/i18n/en.json
Normal file
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"uni-popup.cancel": "cancel",
|
||||
"uni-popup.ok": "ok",
|
||||
"uni-popup.placeholder": "pleace enter",
|
||||
"uni-popup.title": "Hint",
|
||||
"uni-popup.shareTitle": "Share to"
|
||||
}
|
||||
8
uni_modules/uni-popup/components/uni-popup/i18n/index.js
Normal file
8
uni_modules/uni-popup/components/uni-popup/i18n/index.js
Normal file
@@ -0,0 +1,8 @@
|
||||
import en from './en.json'
|
||||
import zhHans from './zh-Hans.json'
|
||||
import zhHant from './zh-Hant.json'
|
||||
export default {
|
||||
en,
|
||||
'zh-Hans': zhHans,
|
||||
'zh-Hant': zhHant
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"uni-popup.cancel": "取消",
|
||||
"uni-popup.ok": "确定",
|
||||
"uni-popup.placeholder": "请输入",
|
||||
"uni-popup.title": "提示",
|
||||
"uni-popup.shareTitle": "分享到"
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"uni-popup.cancel": "取消",
|
||||
"uni-popup.ok": "確定",
|
||||
"uni-popup.placeholder": "請輸入",
|
||||
"uni-popup.title": "提示",
|
||||
"uni-popup.shareTitle": "分享到"
|
||||
}
|
||||
45
uni_modules/uni-popup/components/uni-popup/keypress.js
Normal file
45
uni_modules/uni-popup/components/uni-popup/keypress.js
Normal file
@@ -0,0 +1,45 @@
|
||||
// #ifdef H5
|
||||
export default {
|
||||
name: 'Keypress',
|
||||
props: {
|
||||
disable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
const keyNames = {
|
||||
esc: ['Esc', 'Escape'],
|
||||
tab: 'Tab',
|
||||
enter: 'Enter',
|
||||
space: [' ', 'Spacebar'],
|
||||
up: ['Up', 'ArrowUp'],
|
||||
left: ['Left', 'ArrowLeft'],
|
||||
right: ['Right', 'ArrowRight'],
|
||||
down: ['Down', 'ArrowDown'],
|
||||
delete: ['Backspace', 'Delete', 'Del']
|
||||
}
|
||||
const listener = ($event) => {
|
||||
if (this.disable) {
|
||||
return
|
||||
}
|
||||
const keyName = Object.keys(keyNames).find(key => {
|
||||
const keyName = $event.key
|
||||
const value = keyNames[key]
|
||||
return value === keyName || (Array.isArray(value) && value.includes(keyName))
|
||||
})
|
||||
if (keyName) {
|
||||
// 避免和其他按键事件冲突
|
||||
setTimeout(() => {
|
||||
this.$emit(keyName, {})
|
||||
}, 0)
|
||||
}
|
||||
}
|
||||
document.addEventListener('keyup', listener)
|
||||
// this.$once('hook:beforeDestroy', () => {
|
||||
// document.removeEventListener('keyup', listener)
|
||||
// })
|
||||
},
|
||||
render: () => {}
|
||||
}
|
||||
// #endif
|
||||
26
uni_modules/uni-popup/components/uni-popup/popup.js
Normal file
26
uni_modules/uni-popup/components/uni-popup/popup.js
Normal file
@@ -0,0 +1,26 @@
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.popup = this.getParent()
|
||||
},
|
||||
methods:{
|
||||
/**
|
||||
* 获取父元素实例
|
||||
*/
|
||||
getParent(name = 'uniPopup') {
|
||||
let parent = this.$parent;
|
||||
let parentName = parent.$options.name;
|
||||
while (parentName !== name) {
|
||||
parent = parent.$parent;
|
||||
if (!parent) return false
|
||||
parentName = parent.$options.name;
|
||||
}
|
||||
return parent;
|
||||
},
|
||||
}
|
||||
}
|
||||
403
uni_modules/uni-popup/components/uni-popup/uni-popup.vue
Normal file
403
uni_modules/uni-popup/components/uni-popup/uni-popup.vue
Normal file
@@ -0,0 +1,403 @@
|
||||
<template>
|
||||
<view v-if="showPopup" class="uni-popup" :class="[popupstyle, isDesktop ? 'fixforpc-z-index' : '']" @touchmove.stop.prevent="clear">
|
||||
<view @touchstart="touchstart" >
|
||||
<uni-transition key="1" v-if="maskShow" name="mask" mode-class="fade" :styles="maskClass" :duration="duration" :show="showTrans" @click="onTap" />
|
||||
<uni-transition key="2" :mode-class="ani" name="content" :styles="transClass" :duration="duration" :show="showTrans" @click="onTap">
|
||||
<view class="uni-popup__wrapper" :style="{ backgroundColor: bg }" :class="[popupstyle]" @click="clear"><slot /></view>
|
||||
</uni-transition>
|
||||
</view>
|
||||
<!-- #ifdef H5 -->
|
||||
<keypress v-if="maskShow" @esc="onTap" />
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// #ifdef H5
|
||||
import keypress from './keypress.js'
|
||||
// #endif
|
||||
|
||||
/**
|
||||
* PopUp 弹出层
|
||||
* @description 弹出层组件，为了解决遮罩弹层的问题
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
|
||||
* @property {String} type = [top|center|bottom|left|right|message|dialog|share] 弹出方式
|
||||
* @value top 顶部弹出
|
||||
* @value center 中间弹出
|
||||
* @value bottom 底部弹出
|
||||
* @value left 左侧弹出
|
||||
* @value right 右侧弹出
|
||||
* @value message 消息提示
|
||||
* @value dialog 对话框
|
||||
* @value share 底部分享示例
|
||||
* @property {Boolean} animation = [ture|false] 是否开启动画
|
||||
* @property {Boolean} maskClick = [ture|false] 蒙版点击是否关闭弹窗
|
||||
* @property {String} backgroundColor 主窗口背景色
|
||||
* @property {Boolean} safeArea 是否适配底部安全区
|
||||
* @event {Function} change 打开关闭弹窗触发，e={show: false}
|
||||
* @event {Function} maskClick 点击遮罩触发
|
||||
*/
|
||||
|
||||
export default {
|
||||
name: 'uniPopup',
|
||||
components: {
|
||||
// #ifdef H5
|
||||
keypress
|
||||
// #endif
|
||||
},
|
||||
emits:['change','maskClick'],
|
||||
props: {
|
||||
// 开启动画
|
||||
animation: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
|
||||
// message: 消息提示 ; dialog : 对话框
|
||||
type: {
|
||||
type: String,
|
||||
default: 'center'
|
||||
},
|
||||
// maskClick
|
||||
maskClick: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: 'none'
|
||||
},
|
||||
safeArea:{
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
/**
|
||||
* 监听type类型
|
||||
*/
|
||||
type: {
|
||||
handler: function(type) {
|
||||
if (!this.config[type]) return
|
||||
this[this.config[type]](true)
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
isDesktop: {
|
||||
handler: function(newVal) {
|
||||
if (!this.config[newVal]) return
|
||||
this[this.config[this.type]](true)
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
/**
|
||||
* 监听遮罩是否可点击
|
||||
* @param {Object} val
|
||||
*/
|
||||
maskClick: {
|
||||
handler: function(val) {
|
||||
this.mkclick = val
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
duration: 300,
|
||||
ani: [],
|
||||
showPopup: false,
|
||||
showTrans: false,
|
||||
popupWidth: 0,
|
||||
popupHeight: 0,
|
||||
config: {
|
||||
top: 'top',
|
||||
bottom: 'bottom',
|
||||
center: 'center',
|
||||
left: 'left',
|
||||
right: 'right',
|
||||
message: 'top',
|
||||
dialog: 'center',
|
||||
share: 'bottom'
|
||||
},
|
||||
maskClass: {
|
||||
position: 'fixed',
|
||||
bottom: 0,
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.4)'
|
||||
},
|
||||
transClass: {
|
||||
position: 'fixed',
|
||||
left: 0,
|
||||
right: 0
|
||||
},
|
||||
maskShow: true,
|
||||
mkclick: true,
|
||||
popupstyle: this.isDesktop ? 'fixforpc-top' : 'top'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isDesktop() {
|
||||
return this.popupWidth >= 500 && this.popupHeight >= 500
|
||||
},
|
||||
bg() {
|
||||
if (this.backgroundColor === '' || this.backgroundColor === 'none') {
|
||||
return 'transparent'
|
||||
}
|
||||
return this.backgroundColor
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const fixSize = () => {
|
||||
const { windowWidth, windowHeight, windowTop, safeAreaInsets } = uni.getSystemInfoSync()
|
||||
this.popupWidth = windowWidth
|
||||
this.popupHeight = windowHeight + windowTop
|
||||
// 是否适配底部安全区
|
||||
if(this.safeArea){
|
||||
this.safeAreaInsets = safeAreaInsets
|
||||
}else{
|
||||
this.safeAreaInsets = 0
|
||||
}
|
||||
}
|
||||
fixSize()
|
||||
// #ifdef H5
|
||||
// window.addEventListener('resize', fixSize)
|
||||
// this.$once('hook:beforeDestroy', () => {
|
||||
// window.removeEventListener('resize', fixSize)
|
||||
// })
|
||||
// #endif
|
||||
},
|
||||
created() {
|
||||
this.mkclick = this.maskClick
|
||||
if (this.animation) {
|
||||
this.duration = 300
|
||||
} else {
|
||||
this.duration = 0
|
||||
}
|
||||
// TODO 处理 message 组件生命周期异常的问题
|
||||
this.messageChild = null
|
||||
// TODO 解决头条冒泡的问题
|
||||
this.clearPropagation = false
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 公用方法，不显示遮罩层
|
||||
*/
|
||||
closeMask() {
|
||||
this.maskShow = false
|
||||
},
|
||||
/**
|
||||
* 公用方法，遮罩层禁止点击
|
||||
*/
|
||||
disableMask() {
|
||||
this.mkclick = false
|
||||
},
|
||||
// TODO nvue 取消冒泡
|
||||
clear(e) {
|
||||
// #ifndef APP-NVUE
|
||||
e.stopPropagation()
|
||||
// #endif
|
||||
this.clearPropagation = true
|
||||
},
|
||||
|
||||
open(direction) {
|
||||
let innerType = ['top', 'center', 'bottom', 'left', 'right', 'message', 'dialog', 'share']
|
||||
if (!(direction && innerType.indexOf(direction) !== -1)) {
|
||||
direction = this.type
|
||||
}
|
||||
if (!this.config[direction]) {
|
||||
console.error('缺少类型：', direction)
|
||||
return
|
||||
}
|
||||
this[this.config[direction]]()
|
||||
this.$emit('change', {
|
||||
show: true,
|
||||
type: direction
|
||||
})
|
||||
},
|
||||
close(type) {
|
||||
this.showTrans = false
|
||||
this.$emit('change', {
|
||||
show: false,
|
||||
type: this.type
|
||||
})
|
||||
clearTimeout(this.timer)
|
||||
// // 自定义关闭事件
|
||||
// this.customOpen && this.customClose()
|
||||
this.timer = setTimeout(() => {
|
||||
this.showPopup = false
|
||||
}, 300)
|
||||
},
|
||||
// TODO 处理冒泡事件，头条的冒泡事件有问题 ，先这样兼容
|
||||
touchstart(){
|
||||
this.clearPropagation = false
|
||||
},
|
||||
|
||||
onTap() {
|
||||
if (this.clearPropagation) {
|
||||
// fix by mehaotian 兼容 nvue
|
||||
this.clearPropagation = false
|
||||
return
|
||||
}
|
||||
this.$emit('maskClick')
|
||||
if (!this.mkclick) return
|
||||
this.close()
|
||||
},
|
||||
/**
|
||||
* 顶部弹出样式处理
|
||||
*/
|
||||
top(type) {
|
||||
this.popupstyle = this.isDesktop ? 'fixforpc-top' : 'top'
|
||||
this.ani = ['slide-top']
|
||||
this.transClass = {
|
||||
position: 'fixed',
|
||||
left: 0,
|
||||
right: 0,
|
||||
backgroundColor: this.bg
|
||||
}
|
||||
// TODO 兼容 type 属性 ，后续会废弃
|
||||
if (type) return
|
||||
this.showPopup = true
|
||||
this.showTrans = true
|
||||
this.$nextTick(() => {
|
||||
if (this.messageChild && this.type === 'message') {
|
||||
this.messageChild.timerClose()
|
||||
}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 底部弹出样式处理
|
||||
*/
|
||||
bottom(type) {
|
||||
this.popupstyle = 'bottom'
|
||||
this.ani = ['slide-bottom']
|
||||
|
||||
this.transClass = {
|
||||
position: 'fixed',
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
paddingBottom: (this.safeAreaInsets && this.safeAreaInsets.bottom) || 0,
|
||||
backgroundColor: this.bg
|
||||
}
|
||||
// TODO 兼容 type 属性 ，后续会废弃
|
||||
if (type) return
|
||||
this.showPopup = true
|
||||
this.showTrans = true
|
||||
},
|
||||
/**
|
||||
* 中间弹出样式处理
|
||||
*/
|
||||
center(type) {
|
||||
this.popupstyle = 'center'
|
||||
this.ani = ['zoom-out', 'fade']
|
||||
this.transClass = {
|
||||
position: 'fixed',
|
||||
/* #ifndef APP-NVUE */
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
/* #endif */
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center'
|
||||
}
|
||||
// TODO 兼容 type 属性 ，后续会废弃
|
||||
if (type) return
|
||||
this.showPopup = true
|
||||
this.showTrans = true
|
||||
},
|
||||
left(type) {
|
||||
this.popupstyle = 'left'
|
||||
this.ani = ['slide-left']
|
||||
this.transClass = {
|
||||
position: 'fixed',
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
top: 0,
|
||||
backgroundColor: this.bg,
|
||||
/* #ifndef APP-NVUE */
|
||||
display: 'flex',
|
||||
flexDirection: 'column'
|
||||
/* #endif */
|
||||
}
|
||||
// TODO 兼容 type 属性 ，后续会废弃
|
||||
if (type) return
|
||||
this.showPopup = true
|
||||
this.showTrans = true
|
||||
},
|
||||
right(type) {
|
||||
this.popupstyle = 'right'
|
||||
this.ani = ['slide-right']
|
||||
this.transClass = {
|
||||
position: 'fixed',
|
||||
bottom: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
backgroundColor: this.bg,
|
||||
/* #ifndef APP-NVUE */
|
||||
display: 'flex',
|
||||
flexDirection: 'column'
|
||||
/* #endif */
|
||||
}
|
||||
// TODO 兼容 type 属性 ，后续会废弃
|
||||
if (type) return
|
||||
this.showPopup = true
|
||||
this.showTrans = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.uni-popup {
|
||||
position: fixed;
|
||||
/* #ifndef APP-NVUE */
|
||||
z-index: 99;
|
||||
/* #endif */
|
||||
&.top,
|
||||
&.left,
|
||||
&.right {
|
||||
/* #ifdef H5 */
|
||||
top: var(--window-top);
|
||||
/* #endif */
|
||||
/* #ifndef H5 */
|
||||
top: 0;
|
||||
/* #endif */
|
||||
}
|
||||
.uni-popup__wrapper {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
/* #endif */
|
||||
position: relative;
|
||||
/* iphonex 等安全区设置，底部安全区适配 */
|
||||
/* #ifndef APP-NVUE */
|
||||
// padding-bottom: constant(safe-area-inset-bottom);
|
||||
// padding-bottom: env(safe-area-inset-bottom);
|
||||
/* #endif */
|
||||
&.left,
|
||||
&.right {
|
||||
/* #ifdef H5 */
|
||||
padding-top: var(--window-top);
|
||||
/* #endif */
|
||||
/* #ifndef H5 */
|
||||
padding-top: 0;
|
||||
/* #endif */
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fixforpc-z-index {
|
||||
/* #ifndef APP-NVUE */
|
||||
z-index: 999;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.fixforpc-top {
|
||||
top: 0;
|
||||
}
|
||||
</style>
|
||||
89
uni_modules/uni-popup/package.json
Normal file
89
uni_modules/uni-popup/package.json
Normal file
@@ -0,0 +1,89 @@
|
||||
{
|
||||
"id": "uni-popup",
|
||||
"displayName": "uni-popup 弹出层",
|
||||
"version": "1.6.2",
|
||||
"description": " Popup 组件，提供常用的弹层",
|
||||
"keywords": [
|
||||
"uni-ui",
|
||||
"弹出层",
|
||||
"弹窗",
|
||||
"popup",
|
||||
"弹框"
|
||||
],
|
||||
"repository": "https://github.com/dcloudio/uni-ui",
|
||||
"engines": {
|
||||
"HBuilderX": ""
|
||||
},
|
||||
"directories": {
|
||||
"example": "../../temps/example_temps"
|
||||
},
|
||||
"dcloudext": {
|
||||
"category": [
|
||||
"前端组件",
|
||||
"通用组件"
|
||||
],
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [
|
||||
"uni-transition"
|
||||
],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
},
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "u"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
296
uni_modules/uni-popup/readme.md
Normal file
296
uni_modules/uni-popup/readme.md
Normal file
@@ -0,0 +1,296 @@
|
||||
|
||||
|
||||
## Popup 弹出层
|
||||
> **组件名：uni-popup**
|
||||
> 代码块： `uPopup`
|
||||
> 关联组件：`uni-popup-dialog`,`uni-popup-message`,`uni-popup-share`,`uni-transition`
|
||||
|
||||
|
||||
弹出层组件，在应用中弹出一个消息提示窗口、提示框等
|
||||
|
||||
|
||||
> **注意事项**
|
||||
> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
|
||||
> - 组件需要依赖 `sass` 插件 ，请自行手动安装
|
||||
> - `uni-popup-message` 、 `uni-popup-dialog` 等扩展ui组件，需要和 `uni-popup` 配套使用，暂不支持单独使用
|
||||
> - `nvue` 中使用 `uni-popup` 时，尽量将组件置于其他元素后面，避免出现层级问题
|
||||
> - `uni-popup` 并不能完全阻止页面滚动，可在打开 `uni-popup` 的时候手动去做一些处理，禁止页面滚动
|
||||
> - 如果想在页面渲染完毕后就打开 `uni-popup` ，请在 `onReady` 或 `mounted` 生命周期内调用，确保组件渲染完毕
|
||||
> - 在微信小程序开发者工具中，启用真机调试，popup 会延时出现，是因为 setTimeout 在真机调试中的延时问题导致的，预览和发布小程序不会出现此问题
|
||||
> - 使用 `npm` 方式引入组件，如果确认引用正确，但是提示未注册组件或显示不正常，请尝试重新编译项目
|
||||
> - `uni-popup` 中尽量不要使用 `scroll-view` 嵌套过多的内容，可能会影响组件的性能，导致组件无法打开或者打开卡顿
|
||||
> - `uni-popup` 不会覆盖原生 tabbar 和原生导航栏
|
||||
> - 组件支持 nvue ，需要在 `manifest.json > app-plus` 节点下配置 `"nvueStyleCompiler" : "uni-app"`
|
||||
> - 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||
|
||||
|
||||
|
||||
### 安装方式
|
||||
|
||||
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范，`HBuilderX 2.5.5`起，只需将本组件导入项目，在页面`template`中即可直接使用，无需在页面中`import`和注册`components`。
|
||||
|
||||
如需通过`npm`方式使用`uni-ui`组件，另见文档：[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
|
||||
|
||||
|
||||
### 基本用法
|
||||
|
||||
**示例**
|
||||
|
||||
```html
|
||||
<button @click="open">打开弹窗</button>
|
||||
<uni-popup ref="popup" type="bottom">底部弹出 Popup</uni-popup>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
methods:{
|
||||
open(){
|
||||
// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
|
||||
this.$refs.popup.open('top')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
### 设置主窗口背景色
|
||||
|
||||
在大多数场景下，并不需要设置 `background-color` 属性，因为`uni-popup`的主窗口默认是透明的，在向里面插入内容的时候 ，样式完全交由用户定制，如果设置了背景色 ，例如 `uni-popup-dialog` 中的圆角就很难去实现，不设置背景色，更适合用户去自由发挥。
|
||||
|
||||
而也有特例，需要我们主动去设置背景色，例如 `type = 'bottom'` 的时候 ，在异型屏中遇到了底部安全区问题（如 iphone 11），因为 `uni-popup`的主要内容避开了安全区（设置`safe-area:true`），导致底部的颜色我们无法自定义，这时候使用 `background-color` 就可以解决这个问题。
|
||||
|
||||
**示例**
|
||||
|
||||
```html
|
||||
<button @click="open">打开弹窗</button>
|
||||
<uni-popup ref="popup" type="bottom" background-color="#fff">底部弹出 Popup</uni-popup>
|
||||
```
|
||||
|
||||
### 禁用打开动画
|
||||
在某些场景 ，可能不希望弹层有动画效果 ，只需要将 `animation` 属性设置为 `false` 即可以关闭动画。
|
||||
|
||||
**示例**
|
||||
|
||||
```html
|
||||
<button @click="open">打开弹窗</button>
|
||||
<uni-popup ref="popup" type="center" :animation="false">中间弹出 Popup</uni-popup>
|
||||
```
|
||||
|
||||
### 禁用点击遮罩关闭
|
||||
默认情况下，点击遮罩会自动关闭`uni-popup`，如不想点击关闭，只需将`mask-click`设置为`false`，这时候要关闭`uni-popup`，只能手动调用 `close` 方法。
|
||||
|
||||
**示例**
|
||||
|
||||
```html
|
||||
<button @click="open">打开弹窗</button>
|
||||
<uni-popup ref="popup" :mask-click="false">
|
||||
<text>Popup</text>
|
||||
<button @click="close">关闭</button>
|
||||
</uni-popup>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
onReady() {},
|
||||
methods: {
|
||||
open() {
|
||||
this.$refs.popup.open('top')
|
||||
},
|
||||
close() {
|
||||
this.$refs.popup.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Popup Props
|
||||
|
||||
|属性名|类型|默认值|说明|
|
||||
|:-:|:-:|:-:|:-:|
|
||||
|animation|Boolean|true|是否开启动画|
|
||||
|type|String|'center'|弹出方式|
|
||||
|mask-click|Boolean|true|蒙版点击是否关闭弹窗|
|
||||
|background-color|String|'none'|主窗口背景色|
|
||||
|safe-area|Boolean|true|是否适配底部安全区|
|
||||
|
||||
#### Type Options
|
||||
|
||||
|属性名|说明|
|
||||
|:-:| :-:|
|
||||
|top|顶部弹出 |
|
||||
|center|居中弹出|
|
||||
|bottom|底部弹出|
|
||||
|left|左侧弹出|
|
||||
|right|右侧弹出|
|
||||
|message|预置样式 ：消息提示|
|
||||
|dialog|预置样式 ：对话框|
|
||||
|share|预置样式 ：底部弹出分享示例 |
|
||||
|
||||
|
||||
### Popup Methods
|
||||
|
||||
|方法称名 |说明|参数|
|
||||
|:-:|:-:|:-:|
|
||||
|open|打开弹出层|open(String:type) ，如果参数可代替 type 属性|
|
||||
|close|关闭弹出层 |-|
|
||||
|
||||
|
||||
### Popup Events
|
||||
|
||||
|事件称名|说明|返回值|
|
||||
|:-:|:-:|:-:|
|
||||
|change|组件状态发生变化触发|e={show: true｜false,type:当前模式}|
|
||||
|maskClick|点击遮罩层触发|-|
|
||||
|
||||
|
||||
## 扩展组件说明
|
||||
`uni-popup` 其实并没有任何样式，只提供基础的动画效果，给用户一个弹出层解决方案，仅仅是这样并不能满足开发需求，所以我们提供了三种基础扩展样式
|
||||
|
||||
### uni-popup-message 提示信息
|
||||
|
||||
将 `uni-popup` 的`type`属性改为 `message`，并引入对应组件即可使用消息提示 ，*该组件不支持单独使用*
|
||||
|
||||
**示例**
|
||||
|
||||
```html
|
||||
<uni-popup ref="popup" type="message">
|
||||
<uni-popup-message type="success" message="成功消息" :duration="2000"></uni-popup-message>
|
||||
</uni-popup>
|
||||
```
|
||||
|
||||
### PopupMessage Props
|
||||
|
||||
|属性名|类型|默认值|说明|
|
||||
|:-:|:-:|:-:|:-:|
|
||||
|type|String|success|消息提示主题|
|
||||
|message|String|-|消息提示文字|
|
||||
|duration|Number|3000|消息显示时间，超过显示时间组件自动关闭，设置为0 将不会关闭，需手动调用 close 方法关闭|
|
||||
|
||||
#### Type Options
|
||||
|
||||
|属性名|说明|
|
||||
|:-:| :-:|
|
||||
|success|成功 |
|
||||
|warn|警告|
|
||||
|error|失败|
|
||||
|info|消息|
|
||||
|
||||
### PopupMessage Slots
|
||||
|
||||
|名称|说明|
|
||||
|:-:|:-:|
|
||||
|default|消息内容，会覆盖 message 属性|
|
||||
|
||||
### uni-popup-dialog 对话框
|
||||
|
||||
将 `uni-popup` 的`type`属性改为 `dialog`，并引入对应组件即可使用对话框 ，*该组件不支持单独使用*
|
||||
|
||||
**示例**
|
||||
|
||||
```html
|
||||
<button @click="open">打开弹窗</button>
|
||||
<uni-popup ref="popup" type="dialog">
|
||||
<uni-popup-dialog mode="input" message="成功消息" :duration="2000" :before-close="true" @close="close" @confirm="confirm"></uni-popup-dialog>
|
||||
</uni-popup>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
methods: {
|
||||
open() {
|
||||
this.$refs.popup.open()
|
||||
},
|
||||
/**
|
||||
* 点击取消按钮触发
|
||||
* @param {Object} done
|
||||
*/
|
||||
close() {
|
||||
// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 close 才会关闭对话框
|
||||
// ...
|
||||
this.$refs.popup.close()
|
||||
},
|
||||
/**
|
||||
* 点击确认按钮触发
|
||||
* @param {Object} done
|
||||
* @param {Object} value
|
||||
*/
|
||||
confirm(value) {
|
||||
// 输入框的值
|
||||
console.log(value)
|
||||
// TODO 做一些其他的事情，手动执行 close 才会关闭对话框
|
||||
// ...
|
||||
this.$refs.popup.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### PopupDialog Props
|
||||
|
||||
|属性名|类型|默认值|说明|
|
||||
|:-:|:-:|:-:|:-:|
|
||||
|type|String|success|对话框标题主题，可选值： success/warn/info/error|
|
||||
|mode|String|base| 对话框模式，可选值：base（提示对话框）/input（可输入对话框）|
|
||||
|title|String|-|对话框标题|
|
||||
|content|String|-|对话框内容，base模式下生效|
|
||||
|value| String\Number|-|输入框默认值，input模式下生效|
|
||||
|placeholder|String|-|输入框提示文字，input模式下生效|
|
||||
|before-close|Boolean|false | 是否拦截按钮事件，如为true，则不会关闭对话框，关闭需要手动执行 uni-popup 的 close 方法|
|
||||
|
||||
#### PopupDialog Events
|
||||
|
||||
|事件称名 |说明|返回值|
|
||||
|:-:|:-:|:-:|
|
||||
|close|点击dialog取消按钮触发|-|
|
||||
|confirm|点击dialog确定按钮触发|e={value:input模式下输入框的值}|
|
||||
|
||||
### PopupDialog Slots
|
||||
|
||||
|名称|说明|
|
||||
|:-:|:-:|
|
||||
|default|自定义内容，回覆盖原有的内容显示|
|
||||
|
||||
### uni-popup-share 分享示例
|
||||
|
||||
分享示例，不作为最终可使用的组件，只做为样式组件，供用户自行修改，`后续的开发计划是实现实际的分享逻辑，参数可配置`。
|
||||
|
||||
将 `uni-popup` 的 `type` 属性改为 `share`，并引入对应组件即可使用 ，*该组件不支持单独使用*
|
||||
|
||||
**示例**
|
||||
|
||||
```html
|
||||
<uni-popup ref="popup" type="share">
|
||||
<uni-popup-share title="分享到" @select="select"></uni-popup-share>
|
||||
</uni-popup>
|
||||
```
|
||||
|
||||
### PopupShare Props
|
||||
|
||||
|属性名|类型|默认值|说明|
|
||||
|:-:|:-:|:-:| :-: |
|
||||
|title|String|-|分享弹窗标题|
|
||||
|before-close|Boolean|false | 是否拦截按钮事件，如为true，则不会关闭对话框，关闭需要手动执行 uni-popup 的 close 方法|
|
||||
|
||||
### PopupShare Events
|
||||
|
||||
|事件称名|说明|返回值|
|
||||
|:-:|:-:|:-:|
|
||||
|select|选择触发|e = {item,index}：所选参数|
|
||||
|
||||
**Tips**
|
||||
- share 分享组件，只是作为一个扩展示例，如果需要修改数据源，请到组件内修改
|
||||
|
||||
## 帮助
|
||||
在使用中如遇到无法解决的问题，请提 [Issues](https://github.com/dcloudio/uni-ui/issues) 给我们。
|
||||
|
||||
|
||||
|
||||
## 组件示例
|
||||
|
||||
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/popup/popup](https://hellouniapp.dcloud.net.cn/pages/extUI/popup/popup)
|
||||
13
uni_modules/uni-transition/changelog.md
Normal file
13
uni_modules/uni-transition/changelog.md
Normal file
@@ -0,0 +1,13 @@
|
||||
## 1.2.0（2021-07-30）
|
||||
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||
## 1.1.1（2021-05-12）
|
||||
- 新增 示例地址
|
||||
- 修复 示例项目缺少组件的Bug
|
||||
## 1.1.0（2021-04-22）
|
||||
- 新增 通过方法自定义动画
|
||||
- 新增 custom-class 非 NVUE 平台支持自定义 class 定制样式
|
||||
- 优化 动画触发逻辑，使动画更流畅
|
||||
- 优化 支持单独的动画类型
|
||||
- 优化 文档示例
|
||||
## 1.0.2（2021-02-05）
|
||||
- 调整为uni_modules目录规范
|
||||
@@ -0,0 +1,128 @@
|
||||
// const defaultOption = {
|
||||
// duration: 300,
|
||||
// timingFunction: 'linear',
|
||||
// delay: 0,
|
||||
// transformOrigin: '50% 50% 0'
|
||||
// }
|
||||
// #ifdef APP-NVUE
|
||||
const nvueAnimation = uni.requireNativePlugin('animation')
|
||||
// #endif
|
||||
class MPAnimation {
|
||||
constructor(options, _this) {
|
||||
this.options = options
|
||||
this.animation = uni.createAnimation(options)
|
||||
this.currentStepAnimates = {}
|
||||
this.next = 0
|
||||
this.$ = _this
|
||||
|
||||
}
|
||||
|
||||
_nvuePushAnimates(type, args) {
|
||||
let aniObj = this.currentStepAnimates[this.next]
|
||||
let styles = {}
|
||||
if (!aniObj) {
|
||||
styles = {
|
||||
styles: {},
|
||||
config: {}
|
||||
}
|
||||
} else {
|
||||
styles = aniObj
|
||||
}
|
||||
if (animateTypes1.includes(type)) {
|
||||
if (!styles.styles.transform) {
|
||||
styles.styles.transform = ''
|
||||
}
|
||||
let unit = ''
|
||||
if(type === 'rotate'){
|
||||
unit = 'deg'
|
||||
}
|
||||
styles.styles.transform += `${type}(${args+unit}) `
|
||||
} else {
|
||||
styles.styles[type] = `${args}`
|
||||
}
|
||||
this.currentStepAnimates[this.next] = styles
|
||||
}
|
||||
_animateRun(styles = {}, config = {}) {
|
||||
let ref = this.$.$refs['ani'].ref
|
||||
if (!ref) return
|
||||
return new Promise((resolve, reject) => {
|
||||
nvueAnimation.transition(ref, {
|
||||
styles,
|
||||
...config
|
||||
}, res => {
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
_nvueNextAnimate(animates, step = 0, fn) {
|
||||
let obj = animates[step]
|
||||
if (obj) {
|
||||
let {
|
||||
styles,
|
||||
config
|
||||
} = obj
|
||||
this._animateRun(styles, config).then(() => {
|
||||
step += 1
|
||||
this._nvueNextAnimate(animates, step, fn)
|
||||
})
|
||||
} else {
|
||||
this.currentStepAnimates = {}
|
||||
typeof fn === 'function' && fn()
|
||||
this.isEnd = true
|
||||
}
|
||||
}
|
||||
|
||||
step(config = {}) {
|
||||
// #ifndef APP-NVUE
|
||||
this.animation.step(config)
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
this.currentStepAnimates[this.next].config = Object.assign({}, this.options, config)
|
||||
this.currentStepAnimates[this.next].styles.transformOrigin = this.currentStepAnimates[this.next].config.transformOrigin
|
||||
this.next++
|
||||
// #endif
|
||||
return this
|
||||
}
|
||||
|
||||
run(fn) {
|
||||
// #ifndef APP-NVUE
|
||||
this.$.animationData = this.animation.export()
|
||||
this.$.timer = setTimeout(() => {
|
||||
typeof fn === 'function' && fn()
|
||||
}, this.$.durationTime)
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
this.isEnd = false
|
||||
let ref = this.$.$refs['ani'] && this.$.$refs['ani'].ref
|
||||
if(!ref) return
|
||||
this._nvueNextAnimate(this.currentStepAnimates, 0, fn)
|
||||
this.next = 0
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const animateTypes1 = ['matrix', 'matrix3d', 'rotate', 'rotate3d', 'rotateX', 'rotateY', 'rotateZ', 'scale', 'scale3d',
|
||||
'scaleX', 'scaleY', 'scaleZ', 'skew', 'skewX', 'skewY', 'translate', 'translate3d', 'translateX', 'translateY',
|
||||
'translateZ'
|
||||
]
|
||||
const animateTypes2 = ['opacity', 'backgroundColor']
|
||||
const animateTypes3 = ['width', 'height', 'left', 'right', 'top', 'bottom']
|
||||
animateTypes1.concat(animateTypes2, animateTypes3).forEach(type => {
|
||||
MPAnimation.prototype[type] = function(...args) {
|
||||
// #ifndef APP-NVUE
|
||||
this.animation[type](...args)
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
this._nvuePushAnimates(type, args)
|
||||
// #endif
|
||||
return this
|
||||
}
|
||||
})
|
||||
|
||||
export function createAnimation(option, _this) {
|
||||
if(!_this) return
|
||||
clearTimeout(_this.timer)
|
||||
return new MPAnimation(option, _this)
|
||||
}
|
||||
@@ -0,0 +1,277 @@
|
||||
<template>
|
||||
<view v-if="isShow" ref="ani" :animation="animationData" :class="customClass" :style="transformStyles" @click="onClick"><slot></slot></view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { createAnimation } from './createAnimation'
|
||||
|
||||
/**
|
||||
* Transition 过渡动画
|
||||
* @description 简单过渡动画组件
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=985
|
||||
* @property {Boolean} show = [false|true] 控制组件显示或隐藏
|
||||
* @property {Array|String} modeClass = [fade|slide-top|slide-right|slide-bottom|slide-left|zoom-in|zoom-out] 过渡动画类型
|
||||
* @value fade 渐隐渐出过渡
|
||||
* @value slide-top 由上至下过渡
|
||||
* @value slide-right 由右至左过渡
|
||||
* @value slide-bottom 由下至上过渡
|
||||
* @value slide-left 由左至右过渡
|
||||
* @value zoom-in 由小到大过渡
|
||||
* @value zoom-out 由大到小过渡
|
||||
* @property {Number} duration 过渡动画持续时间
|
||||
* @property {Object} styles 组件样式，同 css 样式，注意带’-‘连接符的属性需要使用小驼峰写法如：`backgroundColor:red`
|
||||
*/
|
||||
export default {
|
||||
name: 'uniTransition',
|
||||
emits:['click','change'],
|
||||
props: {
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
modeClass: {
|
||||
type: [Array, String],
|
||||
default() {
|
||||
return 'fade'
|
||||
}
|
||||
},
|
||||
duration: {
|
||||
type: Number,
|
||||
default: 300
|
||||
},
|
||||
styles: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
customClass:{
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isShow: false,
|
||||
transform: '',
|
||||
opacity: 1,
|
||||
animationData: {},
|
||||
durationTime: 300,
|
||||
config: {}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
show: {
|
||||
handler(newVal) {
|
||||
if (newVal) {
|
||||
this.open()
|
||||
} else {
|
||||
// 避免上来就执行 close,导致动画错乱
|
||||
if (this.isShow) {
|
||||
this.close()
|
||||
}
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 生成样式数据
|
||||
stylesObject() {
|
||||
let styles = {
|
||||
...this.styles,
|
||||
'transition-duration': this.duration / 1000 + 's'
|
||||
}
|
||||
let transform = ''
|
||||
for (let i in styles) {
|
||||
let line = this.toLine(i)
|
||||
transform += line + ':' + styles[i] + ';'
|
||||
}
|
||||
return transform
|
||||
},
|
||||
// 初始化动画条件
|
||||
transformStyles() {
|
||||
return 'transform:' + this.transform + ';' + 'opacity:' + this.opacity + ';' + this.stylesObject
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 动画默认配置
|
||||
this.config = {
|
||||
duration: this.duration,
|
||||
timingFunction: 'ease',
|
||||
transformOrigin: '50% 50%',
|
||||
delay: 0
|
||||
}
|
||||
this.durationTime = this.duration
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* ref 触发 初始化动画
|
||||
*/
|
||||
init(obj = {}) {
|
||||
if (obj.duration) {
|
||||
this.durationTime = obj.duration
|
||||
}
|
||||
this.animation = createAnimation(Object.assign(this.config, obj))
|
||||
},
|
||||
/**
|
||||
* 点击组件触发回调
|
||||
*/
|
||||
onClick() {
|
||||
this.$emit('click', {
|
||||
detail: this.isShow
|
||||
})
|
||||
},
|
||||
/**
|
||||
* ref 触发 动画分组
|
||||
* @param {Object} obj
|
||||
*/
|
||||
step(obj, config = {}) {
|
||||
if (!this.animation) return
|
||||
for (let i in obj) {
|
||||
try {
|
||||
if(typeof obj[i] === 'object'){
|
||||
this.animation[i](...obj[i])
|
||||
}else{
|
||||
this.animation[i](obj[i])
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(`方法 ${i} 不存在`)
|
||||
}
|
||||
}
|
||||
this.animation.step(config)
|
||||
return this
|
||||
},
|
||||
/**
|
||||
* ref 触发 执行动画
|
||||
*/
|
||||
run(fn) {
|
||||
if (!this.animation) return
|
||||
this.animation.run(fn)
|
||||
},
|
||||
// 开始过度动画
|
||||
open() {
|
||||
clearTimeout(this.timer)
|
||||
this.transform = ''
|
||||
this.isShow = true
|
||||
let { opacity, transform } = this.styleInit(false)
|
||||
if (typeof opacity !== 'undefined') {
|
||||
this.opacity = opacity
|
||||
}
|
||||
this.transform = transform
|
||||
// 确保动态样式已经生效后，执行动画，如果不加 nextTick ，会导致 wx 动画执行异常
|
||||
this.$nextTick(() => {
|
||||
// TODO 定时器保证动画完全执行，目前有些问题，后面会取消定时器
|
||||
this.timer = setTimeout(() => {
|
||||
this.animation = createAnimation(this.config, this)
|
||||
this.tranfromInit(false).step()
|
||||
this.animation.run()
|
||||
this.$emit('change', {
|
||||
detail: this.isShow
|
||||
})
|
||||
}, 20)
|
||||
})
|
||||
},
|
||||
// 关闭过度动画
|
||||
close(type) {
|
||||
if (!this.animation) return
|
||||
this.tranfromInit(true)
|
||||
.step()
|
||||
.run(() => {
|
||||
this.isShow = false
|
||||
this.animationData = null
|
||||
this.animation = null
|
||||
let { opacity, transform } = this.styleInit(false)
|
||||
this.opacity = opacity || 1
|
||||
this.transform = transform
|
||||
this.$emit('change', {
|
||||
detail: this.isShow
|
||||
})
|
||||
})
|
||||
},
|
||||
// 处理动画开始前的默认样式
|
||||
styleInit(type) {
|
||||
let styles = {
|
||||
transform: ''
|
||||
}
|
||||
let buildStyle = (type, mode) => {
|
||||
if (mode === 'fade') {
|
||||
styles.opacity = this.animationType(type)[mode]
|
||||
} else {
|
||||
styles.transform += this.animationType(type)[mode] + ' '
|
||||
}
|
||||
}
|
||||
if (typeof this.modeClass === 'string') {
|
||||
buildStyle(type, this.modeClass)
|
||||
} else {
|
||||
this.modeClass.forEach(mode => {
|
||||
buildStyle(type, mode)
|
||||
})
|
||||
}
|
||||
return styles
|
||||
},
|
||||
// 处理内置组合动画
|
||||
tranfromInit(type) {
|
||||
let buildTranfrom = (type, mode) => {
|
||||
let aniNum = null
|
||||
if (mode === 'fade') {
|
||||
aniNum = type ? 0 : 1
|
||||
} else {
|
||||
aniNum = type ? '-100%' : '0'
|
||||
if (mode === 'zoom-in') {
|
||||
aniNum = type ? 0.8 : 1
|
||||
}
|
||||
if (mode === 'zoom-out') {
|
||||
aniNum = type ? 1.2 : 1
|
||||
}
|
||||
if (mode === 'slide-right') {
|
||||
aniNum = type ? '100%' : '0'
|
||||
}
|
||||
if (mode === 'slide-bottom') {
|
||||
aniNum = type ? '100%' : '0'
|
||||
}
|
||||
}
|
||||
this.animation[this.animationMode()[mode]](aniNum)
|
||||
}
|
||||
if (typeof this.modeClass === 'string') {
|
||||
buildTranfrom(type, this.modeClass)
|
||||
} else {
|
||||
this.modeClass.forEach(mode => {
|
||||
buildTranfrom(type, mode)
|
||||
})
|
||||
}
|
||||
|
||||
return this.animation
|
||||
},
|
||||
animationType(type) {
|
||||
return {
|
||||
fade: type ? 1 : 0,
|
||||
'slide-top': `translateY(${type ? '0' : '-100%'})`,
|
||||
'slide-right': `translateX(${type ? '0' : '100%'})`,
|
||||
'slide-bottom': `translateY(${type ? '0' : '100%'})`,
|
||||
'slide-left': `translateX(${type ? '0' : '-100%'})`,
|
||||
'zoom-in': `scaleX(${type ? 1 : 0.8}) scaleY(${type ? 1 : 0.8})`,
|
||||
'zoom-out': `scaleX(${type ? 1 : 1.2}) scaleY(${type ? 1 : 1.2})`
|
||||
}
|
||||
},
|
||||
// 内置动画类型与实际动画对应字典
|
||||
animationMode() {
|
||||
return {
|
||||
fade: 'opacity',
|
||||
'slide-top': 'translateY',
|
||||
'slide-right': 'translateX',
|
||||
'slide-bottom': 'translateY',
|
||||
'slide-left': 'translateX',
|
||||
'zoom-in': 'scale',
|
||||
'zoom-out': 'scale'
|
||||
}
|
||||
},
|
||||
// 驼峰转中横线
|
||||
toLine(name) {
|
||||
return name.replace(/([A-Z])/g, '-$1').toLowerCase()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
83
uni_modules/uni-transition/package.json
Normal file
83
uni_modules/uni-transition/package.json
Normal file
@@ -0,0 +1,83 @@
|
||||
{
|
||||
"id": "uni-transition",
|
||||
"displayName": "uni-transition 过渡动画",
|
||||
"version": "1.2.0",
|
||||
"description": "元素的简单过渡动画",
|
||||
"keywords": [
|
||||
"uni-ui",
|
||||
"uniui",
|
||||
"动画",
|
||||
"过渡",
|
||||
"过渡动画"
|
||||
],
|
||||
"repository": "https://github.com/dcloudio/uni-ui",
|
||||
"engines": {
|
||||
"HBuilderX": ""
|
||||
},
|
||||
"directories": {
|
||||
"example": "../../temps/example_temps"
|
||||
},
|
||||
"dcloudext": {
|
||||
"category": [
|
||||
"前端组件",
|
||||
"通用组件"
|
||||
],
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
397
uni_modules/uni-transition/readme.md
Normal file
397
uni_modules/uni-transition/readme.md
Normal file
@@ -0,0 +1,397 @@
|
||||
|
||||
|
||||
## Transition 过渡动画
|
||||
> **组件名：uni-transition**
|
||||
> 代码块： `uTransition`
|
||||
|
||||
|
||||
元素过渡动画
|
||||
|
||||
> **注意事项**
|
||||
> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
|
||||
> - 组件需要依赖 `sass` 插件 ，请自行手动安装
|
||||
> - rotate 旋转动画不需要填写 deg 单位，在小程序上填写单位动画不会执行
|
||||
> - NVUE 下修改宽高动画，不能定位到中心点
|
||||
> - 百度小程序下修改宽高 ，可能会影响其他动画，需注意
|
||||
> - nvue 不支持 costom-class , 请使用 styles
|
||||
> - 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||
|
||||
|
||||
### 安装方式
|
||||
|
||||
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范，`HBuilderX 2.5.5`起，只需将本组件导入项目，在页面`template`中即可直接使用，无需在页面中`import`和注册`components`。
|
||||
|
||||
如需通过`npm`方式使用`uni-ui`组件，另见文档：[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
|
||||
|
||||
### 基本用法
|
||||
|
||||
在 ``template`` 中使用组件
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view>
|
||||
<button type="primary" @click="open">fade</button>
|
||||
<uni-transition mode-class="fade" :styles="{'width':'100px','height':'100px','backgroundColor':'red'}" :show="show" @change="change" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
onLoad() {},
|
||||
methods: {
|
||||
open(mode) {
|
||||
this.show = !this.show
|
||||
},
|
||||
change() {
|
||||
console.log('触发动画')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 样式覆盖
|
||||
|
||||
**注意：`nvue` 不支持 `custom-class` 属性 ，需要使用 `styles` 属性进行兼容**
|
||||
|
||||
使用 `custom-class` 属性绑定样式，可以自定义 `uni-transition` 的样式
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view class="content">
|
||||
<uni-transition custom-class="custom-transition" mode-class="fade" :duration="0" :show="true" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
/* 常规样式覆盖 */
|
||||
.content >>> .custom-transition {
|
||||
width:100px;
|
||||
height:100px;
|
||||
background-color:red;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
/* 如果使用 scss 需要使用 /deep/ */
|
||||
.content /deep/ .custom-transition {
|
||||
width:100px;
|
||||
height:100px;
|
||||
background-color:red;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
|
||||
如果使用 `styles` 注意带’-‘连接符的属性需要使用小驼峰写法如：`backgroundColor:red`
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view class="content">
|
||||
<uni-transition :styles="styles" mode-class="fade" :duration="0" :show="true" />
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
styles:{
|
||||
'width':'100px',
|
||||
'height':'100px',
|
||||
'backgroundColor':'red'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 自定义动画
|
||||
当内置动画类型不能满足需求的时候 ，可以使用 `step()` 和 `run()` 自定义动画,入参以及具体用法参考下方属性说明
|
||||
|
||||
`init()` 方法可以覆盖默认配置
|
||||
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view>
|
||||
<button type="primary" @click="run">执行动画</button>
|
||||
<uni-transition ref="ani" :styles="{'width':'100px','height':'100px','backgroundColor':'red'}" :show="show" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: true,
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
this.$refs.ani.init({
|
||||
duration: 1000,
|
||||
timingFunction: 'linear',
|
||||
transformOrigin: '50% 50%',
|
||||
delay: 500
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
run() {
|
||||
// 同时右平移到 100px,旋转 360 读
|
||||
this.$refs.ani.step({
|
||||
translateX: '100px',
|
||||
rotate: '360'
|
||||
})
|
||||
// 上面的动画执行完成后，等待200毫秒平移到 0px,旋转到 0 读
|
||||
this.$refs.ani.step({
|
||||
translateX: '0px',
|
||||
rotate: '0'
|
||||
},
|
||||
{
|
||||
timingFunction: 'ease-in',
|
||||
duration: 200
|
||||
})
|
||||
// 开始执行动画
|
||||
this.$refs.ani.run(()=>{
|
||||
console.log('动画支持完毕')
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
|
||||
## API
|
||||
|
||||
### Transition Props
|
||||
|
||||
|属性名 |类型 |默认值 |说明 |
|
||||
|:-: |:-: |:-: |:-:|
|
||||
|show |Boolean|false |控制组件显示或隐藏 |
|
||||
|mode-class |Array/String |- |内置过渡动画类型 |
|
||||
|custom-class |String |- |自定义类名 |
|
||||
|duration |Number |300 |过渡动画持续时间 |
|
||||
|styles |Object |- |组件样式，同 css 样式，注意带’-‘连接符的属性需要使用小驼峰写法如：`backgroundColor:red` |
|
||||
|
||||
#### mode-class 内置过渡动画类型说明
|
||||
**格式为** ：`'fade'` 或者 `['fade','slide-top']`
|
||||
|
||||
|属性名 |说明 |
|
||||
|:-: |:-: |
|
||||
|fade |渐隐渐出过渡 |
|
||||
|slide-top |由上至下过渡 |
|
||||
|slide-right |由右至左过渡 |
|
||||
|slide-bottom |由下至上过渡 |
|
||||
|slide-left |由左至右过渡 |
|
||||
|zoom-in |由小到大过渡 |
|
||||
|zoom-out |由大到小过渡 |
|
||||
|
||||
**注意**
|
||||
|
||||
组合使用时，同一种类型相反的过渡动画如（slide-top、slide-bottom）同时使用时，只有最后一个生效
|
||||
|
||||
### Transition Events
|
||||
|
||||
|事件名 |说明 |返回值 |
|
||||
|:-: |:-: |:-: |
|
||||
|click |点击组件触发 |- |
|
||||
|change |过渡动画结束时触发 | e = {detail:true} |
|
||||
|
||||
### Transition Methons
|
||||
|
||||
|方法名|说明|参数|
|
||||
|:-:|:-:|:-:|
|
||||
|init()|手动初始化配置|Function(OBJECT:config)|
|
||||
|step()|动画队列|Function(OBJECT:type,OBJECT:config)|
|
||||
|run()|执行动画|Function(FUNCTION:callback) |
|
||||
|
||||
### init(OBJECT:config)
|
||||
**通过 ref 调用方法**
|
||||
|
||||
手动设置动画配置，需要在页面渲染完毕后调用
|
||||
|
||||
```javascript
|
||||
this.$refs.ani.init({
|
||||
duration: 1000,
|
||||
timingFunction:'ease',
|
||||
delay:500,
|
||||
transformOrigin:'left center'
|
||||
})
|
||||
```
|
||||
|
||||
### step(OBJECT:type,OBJECT:config) 动画队列
|
||||
**通过 ref 调用方法**
|
||||
|
||||
调用 `step()` 来表示一组动画完成，`step` 第一个参数可以传入任意多个动画方法，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画。`step` 第二个参数可以传入一个跟 `uni.createAnimation()` 一样的配置参数用于指定当前组动画的配置。
|
||||
|
||||
Tips
|
||||
- 第一个参数支持的动画参考下面的 `支持的动画`
|
||||
- 第二个参数参考下面的 `动画配置`，可省略，如果省略继承`init`的配置
|
||||
|
||||
|
||||
```javascript
|
||||
this.$refs.ani.step({
|
||||
translateX: '100px'
|
||||
},{
|
||||
duration: 1000,
|
||||
timingFunction:'ease',
|
||||
delay:500,
|
||||
transformOrigin:'left center'
|
||||
})
|
||||
```
|
||||
|
||||
### run(FUNCTION:callback) 执行动画
|
||||
**通过 ref 调用方法**
|
||||
|
||||
在执行 `step()` 后，需要调用 `run()` 来运行动画 ，否则动画会一直等待
|
||||
|
||||
`run()` 方法可以传入一个 `callback` 函数 ，会在所有动画执行完毕后回调
|
||||
|
||||
```javascript
|
||||
this.$refs.ani.step({
|
||||
translateX: '100px'
|
||||
})
|
||||
this.$refs.ani.run(()=>{
|
||||
console.log('动画执行完毕')
|
||||
})
|
||||
|
||||
```
|
||||
|
||||
### 动画配置
|
||||
动画配置 ， `init()` 与 `step()` 第二个参数配置相同 ，如果配置`step() `第二个参数，将会覆盖 `init()` 的配置
|
||||
|
||||
|属性名|值|必填|默认值|说明|平台差异|
|
||||
|:-:|:-:|:-:|:-:|:-:|:-:|
|
||||
|duration|Number|否|400|动画持续时间，单位ms|-|
|
||||
|timingFunction|String|否|"linear"|定义动画的效果|-|
|
||||
|delay|Number|否|0|动画延迟时间，单位 ms|-|
|
||||
|needLayout|Boolean|否|false |动画执行是否影响布局|仅 nvue 支持|
|
||||
|transformOrigin|String |否|"center center"|设置 [transform-origin](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin)|-|
|
||||
|
||||
|
||||
### timingFunction 属性说明
|
||||
|
||||
|值|说明|平台差异|
|
||||
|:-:|:-:|:-:|
|
||||
|linear|动画从头到尾的速度是相同的|-|
|
||||
|ease|动画以低速开始，然后加快，在结束前变慢|-|
|
||||
|ease-in| 动画以低速开始|-|
|
||||
|ease-in-out| 动画以低速开始和结束|-|
|
||||
|ease-out|动画以低速结束|-|
|
||||
|step-start|动画第一帧就跳至结束状态直到结束|nvue不支持|
|
||||
|step-end|动画一直保持开始状态，最后一帧跳到结束状态|nvue不支持|
|
||||
|
||||
```javascript
|
||||
// init 配置
|
||||
this.$refs.ani.init({
|
||||
duration: 1000,
|
||||
timingFunction:'ease',
|
||||
delay:500,
|
||||
transformOrigin:'left center'
|
||||
})
|
||||
// step 配置
|
||||
this.$refs.ani.step({
|
||||
translateX: '100px'
|
||||
},{
|
||||
duration: 1000,
|
||||
timingFunction:'ease',
|
||||
delay:500,
|
||||
transformOrigin:'left center'
|
||||
})
|
||||
```
|
||||
|
||||
### 支持的动画
|
||||
动画方法
|
||||
|
||||
如果同一个动画方法有多个值，多个值使用数组分隔
|
||||
|
||||
```javascript
|
||||
this.$refs.ani.step({
|
||||
width:'100px',
|
||||
scale: [1.2,0.8],
|
||||
})
|
||||
```
|
||||
|
||||
**样式：**
|
||||
|
||||
|属性名|值|说明|平台差异|
|
||||
|:-:|:-:|:-:|:-:|
|
||||
|opacity|value|透明度，参数范围 0~1|-|
|
||||
|backgroundColor|color|颜色值|-|
|
||||
|width|length|长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值|-|
|
||||
|height|length|长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值|-|
|
||||
|top|length|长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值|nvue 不支持|
|
||||
|left|length|长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值|nvue 不支持|
|
||||
|bottom|length|长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值|nvue 不支持|
|
||||
|right|length|长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值|nvue 不支持|
|
||||
|
||||
```javascript
|
||||
this.$refs.ani.step({
|
||||
opacity: 1,
|
||||
backgroundColor: '#ff5a5f',
|
||||
widht:'100px',
|
||||
height:'50rpx',
|
||||
})
|
||||
```
|
||||
|
||||
**旋转：**
|
||||
|
||||
旋转属性的值不需要填写单位
|
||||
|
||||
|属性名|值|说明|平台差异 |
|
||||
|:-:|:-:|:-:|:-:|
|
||||
|rotate|deg|deg的范围-180~180，从原点顺时针旋转一个deg角度 |-|
|
||||
|rotateX|deg|deg的范围-180~180，在X轴旋转一个deg角度 |-|
|
||||
|rotateY|deg|deg的范围-180~180，在Y轴旋转一个deg角度 |-|
|
||||
|rotateZ|deg|deg的范围-180~180，在Z轴旋转一个deg角度 |nvue不支持|
|
||||
|rotate3d|x,y,z,deg| 同 [transform-function rotate3d](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate3d()) |nvue不支持|
|
||||
|
||||
```javascript
|
||||
this.$refs.ani.step({
|
||||
rotateX: 45,
|
||||
rotateY: 45
|
||||
})
|
||||
```
|
||||
|
||||
**缩放：**
|
||||
|
||||
|属性名|值|说明|平台差异|
|
||||
|:-:|:-:|:-: |:-:|
|
||||
|scale|sx,[sy]|一个参数时，表示在X轴、Y轴同时缩放sx倍数；两个参数时表示在X轴缩放sx倍数，在Y轴缩放sy倍数|-|
|
||||
|scaleX|sx|在X轴缩放sx倍数|-|
|
||||
|scaleY|sy|在Y轴缩放sy倍数|-|
|
||||
|scaleZ|sz|在Z轴缩放sy倍数|nvue不支持|
|
||||
|scale3d|sx,sy,sz|在X轴缩放sx倍数，在Y轴缩放sy倍数，在Z轴缩放sz倍数|nvue不支持|
|
||||
|
||||
```javascript
|
||||
this.$refs.ani.step({
|
||||
scale: [1.2,0.8]
|
||||
})
|
||||
```
|
||||
|
||||
**偏移：**
|
||||
|
||||
|属性名|值|说明|平台差异|
|
||||
|:-:|:-:|:-:|:-:|
|
||||
|translate|tx,[ty]|一个参数时，表示在X轴偏移tx，单位px；两个参数时，表示在X轴偏移tx，在Y轴偏移ty，单位px。|-|
|
||||
|translateX|tx| 在X轴偏移tx，单位px|-|
|
||||
|translateY|ty| 在Y轴偏移tx，单位px|-|
|
||||
|translateZ|tz| 在Z轴偏移tx，单位px|nvue不支持|
|
||||
|translate3d|tx,ty,tz| 在X轴偏移tx，在Y轴偏移ty，在Z轴偏移tz，单位px|nvue不支持|
|
||||
|
||||
```javascript
|
||||
this.$refs.ani.step({
|
||||
translateX: '100px'
|
||||
})
|
||||
```
|
||||
|
||||
|
||||
|
||||
## 组件示例
|
||||
|
||||
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/transition/transition](https://hellouniapp.dcloud.net.cn/pages/extUI/transition/transition)
|
||||
Reference in New Issue
Block a user