You've already forked template-MP
Initial commit
This commit is contained in:
yuantao
18
uview-plus/libs/mixin/button.js
Normal file
18
uview-plus/libs/mixin/button.js
Normal file
@@ -0,0 +1,18 @@
|
||||
import { defineMixin } from '../vue'
|
||||
|
||||
export const buttonMixin = defineMixin({
|
||||
props: {
|
||||
lang: String,
|
||||
sessionFrom: String,
|
||||
sendMessageTitle: String,
|
||||
sendMessagePath: String,
|
||||
sendMessageImg: String,
|
||||
showMessageCard: Boolean,
|
||||
appParameter: String,
|
||||
formType: String,
|
||||
openType: String
|
||||
}
|
||||
})
|
||||
|
||||
export default buttonMixin
|
||||
|
||||
201
uview-plus/libs/mixin/mixin.js
Normal file
201
uview-plus/libs/mixin/mixin.js
Normal file
@@ -0,0 +1,201 @@
|
||||
import { defineMixin } from '../vue'
|
||||
import { deepMerge, $parent, sleep } from '../function/index'
|
||||
import test from '../function/test'
|
||||
import route from '../util/route'
|
||||
// #ifdef APP-NVUE
|
||||
// 由于weex为阿里的KPI业绩考核的产物，所以不支持百分比单位，这里需要通过dom查询组件的宽度
|
||||
const dom = uni.requireNativePlugin('dom')
|
||||
// #endif
|
||||
|
||||
export const mixin = defineMixin({
|
||||
// 定义每个组件都可能需要用到的外部样式以及类名
|
||||
props: {
|
||||
// 每个组件都有的父组件传递的样式，可以为字符串或者对象形式
|
||||
customStyle: {
|
||||
type: [Object, String],
|
||||
default: () => ({})
|
||||
},
|
||||
customClass: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 跳转的页面路径
|
||||
url: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 页面跳转的类型
|
||||
linkType: {
|
||||
type: String,
|
||||
default: 'navigateTo'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
onLoad() {
|
||||
// getRect挂载到$u上，因为这方法需要使用in(this)，所以无法把它独立成一个单独的文件导出
|
||||
this.$u.getRect = this.$uGetRect
|
||||
},
|
||||
created() {
|
||||
// 组件当中，只有created声明周期，为了能在组件使用，故也在created中将方法挂载到$u
|
||||
this.$u.getRect = this.$uGetRect
|
||||
},
|
||||
computed: {
|
||||
// 在2.x版本中，将会把$u挂载到uni对象下，导致在模板中无法使用uni.$u.xxx形式
|
||||
// 所以这里通过computed计算属性将其附加到this.$u上，就可以在模板或者js中使用uni.$u.xxx
|
||||
// 只在nvue环境通过此方式引入完整的$u，其他平台会出现性能问题，非nvue则按需引入（主要原因是props过大）
|
||||
$u() {
|
||||
// #ifndef APP-NVUE
|
||||
// 在非nvue端，移除props，http，mixin等对象，避免在小程序setData时数据过大影响性能
|
||||
return deepMerge(uni.$u, {
|
||||
props: undefined,
|
||||
http: undefined,
|
||||
mixin: undefined
|
||||
})
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
return uni.$u
|
||||
// #endif
|
||||
},
|
||||
/**
|
||||
* 生成bem规则类名
|
||||
* 由于微信小程序，H5，nvue之间绑定class的差异，无法通过:class="[bem()]"的形式进行同用
|
||||
* 故采用如下折中做法，最后返回的是数组（一般平台）或字符串（支付宝和字节跳动平台），类似['a', 'b', 'c']或'a b c'的形式
|
||||
* @param {String} name 组件名称
|
||||
* @param {Array} fixed 一直会存在的类名
|
||||
* @param {Array} change 会根据变量值为true或者false而出现或者隐藏的类名
|
||||
* @returns {Array|string}
|
||||
*/
|
||||
bem() {
|
||||
return function (name, fixed, change) {
|
||||
// 类名前缀
|
||||
const prefix = `u-${name}--`
|
||||
const classes = {}
|
||||
if (fixed) {
|
||||
fixed.map((item) => {
|
||||
// 这里的类名，会一直存在
|
||||
classes[prefix + this[item]] = true
|
||||
})
|
||||
}
|
||||
if (change) {
|
||||
change.map((item) => {
|
||||
// 这里的类名，会根据this[item]的值为true或者false，而进行添加或者移除某一个类
|
||||
this[item] ? (classes[prefix + item] = this[item]) : (delete classes[prefix + item])
|
||||
})
|
||||
}
|
||||
return Object.keys(classes)
|
||||
// 支付宝，头条小程序无法动态绑定一个数组类名，否则解析出来的结果会带有","，而导致失效
|
||||
// #ifdef MP-ALIPAY || MP-TOUTIAO || MP-LARK
|
||||
.join(' ')
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 跳转某一个页面
|
||||
openPage(urlKey = 'url') {
|
||||
const url = this[urlKey]
|
||||
if (url) {
|
||||
// h5官方回应：发行h5会自动摇树优化，所有使用uni的地方，都会被直接转换成具体的API调用 https://ask.dcloud.net.cn/question/161523?notification_id-1201922__rf-false__item_id-226372
|
||||
// 使用封装的 route 进行跳转（直接调用方法），不使用 uni 对象
|
||||
route({ type: this.linkType, url })
|
||||
// 执行类似uni.navigateTo的方法
|
||||
// uni[this.linkType]({
|
||||
// url
|
||||
// })
|
||||
}
|
||||
},
|
||||
navTo(url = '', linkType = 'navigateTo') {
|
||||
route({ type: this.linkType, url })
|
||||
},
|
||||
// 查询节点信息
|
||||
// 目前此方法在支付宝小程序中无法获取组件跟接点的尺寸，为支付宝的bug(2020-07-21)
|
||||
// 解决办法为在组件根部再套一个没有任何作用的view元素
|
||||
$uGetRect(selector, all) {
|
||||
return new Promise((resolve) => {
|
||||
// #ifndef APP-NVUE
|
||||
uni.createSelectorQuery()
|
||||
.in(this)[all ? 'selectAll' : 'select'](selector)
|
||||
.boundingClientRect((rect) => {
|
||||
if (all && Array.isArray(rect) && rect.length) {
|
||||
resolve(rect)
|
||||
}
|
||||
if (!all && rect) {
|
||||
resolve(rect)
|
||||
}
|
||||
})
|
||||
.exec()
|
||||
// #endif
|
||||
|
||||
// #ifdef APP-NVUE
|
||||
sleep(30).then(() => {
|
||||
let selectorNvue = selector.substring(1) // 去掉开头的#或者.
|
||||
let selectorRef = this.$refs[selectorNvue]
|
||||
if (!selectorRef) {
|
||||
// console.log('不存在元素，请检查是否设置了ref属性' + selectorNvue + '。')
|
||||
resolve({
|
||||
with: 0,
|
||||
height: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0
|
||||
})
|
||||
}
|
||||
dom.getComponentRect(selectorRef, res => {
|
||||
// console.log(res)
|
||||
resolve(res.size)
|
||||
})
|
||||
})
|
||||
// #endif
|
||||
})
|
||||
},
|
||||
getParentData(parentName = '') {
|
||||
// 避免在created中去定义parent变量
|
||||
if (!this.parent) this.parent = {}
|
||||
// 这里的本质原理是，通过获取父组件实例(也即类似u-radio的父组件u-radio-group的this)
|
||||
// 将父组件this中对应的参数，赋值给本组件(u-radio的this)的parentData对象中对应的属性
|
||||
// 之所以需要这么做，是因为所有端中，头条小程序不支持通过this.parent.xxx去监听父组件参数的变化
|
||||
// 此处并不会自动更新子组件的数据，而是依赖父组件u-radio-group去监听data的变化，手动调用更新子组件的方法去重新获取
|
||||
this.parent = $parent.call(this, parentName)
|
||||
if (this.parent.children) {
|
||||
// 如果父组件的children不存在本组件的实例，才将本实例添加到父组件的children中
|
||||
this.parent.children.indexOf(this) === -1 && this.parent.children.push(this)
|
||||
}
|
||||
if (this.parent && this.parentData) {
|
||||
// 历遍parentData中的属性，将parent中的同名属性赋值给parentData
|
||||
Object.keys(this.parentData).map((key) => {
|
||||
this.parentData[key] = this.parent[key]
|
||||
})
|
||||
}
|
||||
},
|
||||
// 阻止事件冒泡
|
||||
preventEvent(e) {
|
||||
e && typeof (e.stopPropagation) === 'function' && e.stopPropagation()
|
||||
},
|
||||
// 空操作
|
||||
noop(e) {
|
||||
this.preventEvent(e)
|
||||
}
|
||||
},
|
||||
onReachBottom() {
|
||||
uni.$emit('uOnReachBottom')
|
||||
},
|
||||
beforeUnmount() {
|
||||
// 判断当前页面是否存在parent和chldren，一般在checkbox和checkbox-group父子联动的场景会有此情况
|
||||
// 组件销毁时，移除子组件在父组件children数组中的实例，释放资源，避免数据混乱
|
||||
if (this.parent && test.array(this.parent.children)) {
|
||||
// 组件销毁时，移除父组件中的children数组中对应的实例
|
||||
const childrenList = this.parent.children
|
||||
childrenList.map((child, index) => {
|
||||
// 如果相等，则移除
|
||||
if (child === this) {
|
||||
childrenList.splice(index, 1)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
export default mixin
|
||||
13
uview-plus/libs/mixin/mpMixin.js
Normal file
13
uview-plus/libs/mixin/mpMixin.js
Normal file
@@ -0,0 +1,13 @@
|
||||
import { defineMixin } from '../vue'
|
||||
|
||||
export const mpMixin = defineMixin({
|
||||
// #ifdef MP-WEIXIN
|
||||
// 将自定义节点设置成虚拟的，更加接近Vue组件的表现，能更好的使用flex属性
|
||||
options: {
|
||||
virtualHost: true
|
||||
}
|
||||
// #endif
|
||||
})
|
||||
|
||||
export default mpMixin
|
||||
|
||||
26
uview-plus/libs/mixin/mpShare.js
Normal file
26
uview-plus/libs/mixin/mpShare.js
Normal file
@@ -0,0 +1,26 @@
|
||||
import { defineMixin } from '../vue'
|
||||
import { queryParams } from '../function/index'
|
||||
export const mpShare = defineMixin({
|
||||
data() {
|
||||
return {
|
||||
mpShare: {
|
||||
title: '', // 默认为小程序名称
|
||||
path: '', // 默认为当前页面路径
|
||||
imageUrl: '' // 默认为当前页面的截图
|
||||
}
|
||||
}
|
||||
},
|
||||
async onLoad(options) {
|
||||
var pages = getCurrentPages();
|
||||
var page = pages[pages.length - 1];
|
||||
this.mpShare.path = page.route + queryParams(options);
|
||||
},
|
||||
onShareAppMessage(res) {
|
||||
if (res.from === 'button') {// 来自页面内分享按钮
|
||||
console.log(res.target)
|
||||
}
|
||||
return this.mpShare;
|
||||
}
|
||||
})
|
||||
|
||||
export default mpShare
|
||||
27
uview-plus/libs/mixin/openType.js
Normal file
27
uview-plus/libs/mixin/openType.js
Normal file
@@ -0,0 +1,27 @@
|
||||
import { defineMixin } from '../vue'
|
||||
|
||||
export const openType = defineMixin({
|
||||
props: {
|
||||
openType: String
|
||||
},
|
||||
methods: {
|
||||
onGetUserInfo(event) {
|
||||
this.$emit('getuserinfo', event.detail)
|
||||
},
|
||||
onContact(event) {
|
||||
this.$emit('contact', event.detail)
|
||||
},
|
||||
onGetPhoneNumber(event) {
|
||||
this.$emit('getphonenumber', event.detail)
|
||||
},
|
||||
onError(event) {
|
||||
this.$emit('error', event.detail)
|
||||
},
|
||||
onLaunchApp(event) {
|
||||
this.$emit('launchapp', event.detail)
|
||||
},
|
||||
onOpenSetting(event) {
|
||||
this.$emit('opensetting', event.detail)
|
||||
}
|
||||
}
|
||||
})
|
||||
249
uview-plus/libs/mixin/style.js
Normal file
249
uview-plus/libs/mixin/style.js
Normal file
@@ -0,0 +1,249 @@
|
||||
import { defineMixin } from '../vue'
|
||||
import { addStyle, deepMerge, addUnit, trim } from '../function/index'
|
||||
|
||||
export const style = defineMixin({
|
||||
props: {
|
||||
// flex排列方式
|
||||
flexDirection: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// flex-direction的简写
|
||||
fd: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 展示类型
|
||||
display: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// display简写
|
||||
d: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 主轴排列方式
|
||||
justifyContent: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// justifyContent的简写
|
||||
jc: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 纵轴排列方式
|
||||
alignItems: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// align-items的简写
|
||||
ai: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// color简写
|
||||
c: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 字体大小
|
||||
fontSize: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
// font-size简写
|
||||
fs: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
margin: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
// margin简写
|
||||
m: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
// margin-top
|
||||
marginTop: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
// margin-top简写
|
||||
mt: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
// margin-right
|
||||
marginRight: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
// margin-right简写
|
||||
mr: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
// margin-bottom
|
||||
marginBottom: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
// margin-bottom简写
|
||||
mb: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
// margin-left
|
||||
marginLeft: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
// margin-left简写
|
||||
ml: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
// padding-left
|
||||
paddingLeft: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
// padding-left简写
|
||||
pl: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
// padding-top
|
||||
paddingTop: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
// padding-top简写
|
||||
pt: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
// padding-right
|
||||
paddingRight: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
// padding-right简写
|
||||
pr: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
// padding-bottom
|
||||
paddingBottom: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
// padding-bottom简写
|
||||
pb: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
// border-radius
|
||||
borderRadius: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
// border-radius简写
|
||||
radius: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
// transform
|
||||
transform: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 定位
|
||||
position: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// position简写
|
||||
pos: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 宽度
|
||||
width: {
|
||||
type: [String, Number],
|
||||
default: null
|
||||
},
|
||||
// width简写
|
||||
w: {
|
||||
type: [String, Number],
|
||||
default: null
|
||||
},
|
||||
// 高度
|
||||
height: {
|
||||
type: [String, Number],
|
||||
default: null
|
||||
},
|
||||
// height简写
|
||||
h: {
|
||||
type: [String, Number],
|
||||
default: null
|
||||
},
|
||||
top: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
right: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
bottom: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
left: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
viewStyle() {
|
||||
const style = {}
|
||||
const addStyleTmp = addStyle(this.width || this.w)
|
||||
&& (style.width = addStyle(this.width || this.w))(this.height || this.h)
|
||||
&& (style.height = addStyle(this.height || this.h))(this.margin || this.m)
|
||||
&& (style.margin = addStyle(this.margin || this.m))(this.marginTop || this.mt)
|
||||
&& (style.marginTop = addStyle(this.marginTop || this.mt))(this.marginRight || this.mr)
|
||||
&& (style.marginRight = addStyle(this.marginRight || this.mr))(this.marginBottom || this.mb)
|
||||
&& (style.marginBottom = addStyle(this.marginBottom || this.mb))(this.marginLeft || this.ml)
|
||||
&& (style.marginLeft = addStyle(this.marginLeft || this.ml))(this.padding || this.p)
|
||||
&& (style.padding = addStyle(this.padding || this.p))(this.paddingTop || this.pt)
|
||||
&& (style.paddingTop = addStyle(this.paddingTop || this.pt))(this.paddingRight || this.pr)
|
||||
&& (style.paddingRight = addStyle(this.paddingRight || this.pr))(this.paddingBottom || this.pb)
|
||||
&& (style.paddingBottom = addStyle(this.paddingBottom || this.pb))(this.paddingLeft || this.pl)
|
||||
&& (style.paddingLeft = addStyle(this.paddingLeft || this.pl))(this.color || this.c)
|
||||
&& (style.color = this.color || this.c)(this.fontSize || this.fs)
|
||||
&& (style.fontSize = this.fontSize || this.fs)(this.borderRadius || this.radius)
|
||||
&& (style.borderRadius = this.borderRadius || this.radius)(this.position || this.pos)
|
||||
&& (this.position = this.position || this.pos)(this.flexDirection || this.fd)
|
||||
&& (this.flexDirection = this.flexDirection || this.fd)(this.justifyContent || jc)
|
||||
&& (this.justifyContent = this.justifyContent || jc)(this.alignItems || ai)
|
||||
&& (this.alignItems = this.alignItems || ai)
|
||||
return deepMerge(style, addStyleTmp(this.customStyle))
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 获取margin或者padding的单位，比如padding: 0 20转为padding: 0 20px
|
||||
getUnit(unit = '') {
|
||||
// 取出两端空格，分隔成数组，再对数组的每个元素添加单位，最后再合并成字符串
|
||||
return trim(unit).split(' ').map((item) => addUnit(item)).join(' ')
|
||||
}
|
||||
}
|
||||
})
|
||||
61
uview-plus/libs/mixin/touch.js
Normal file
61
uview-plus/libs/mixin/touch.js
Normal file
@@ -0,0 +1,61 @@
|
||||
import { defineMixin } from '../vue'
|
||||
|
||||
const MIN_DISTANCE = 10
|
||||
|
||||
function getDirection(x, y) {
|
||||
if (x > y && x > MIN_DISTANCE) {
|
||||
return 'horizontal'
|
||||
}
|
||||
if (y > x && y > MIN_DISTANCE) {
|
||||
return 'vertical'
|
||||
}
|
||||
return ''
|
||||
}
|
||||
|
||||
export const touchMixin = defineMixin({
|
||||
methods: {
|
||||
getTouchPoint(e) {
|
||||
if (!e) {
|
||||
return {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
} if (e.touches && e.touches[0]) {
|
||||
return {
|
||||
x: e.touches[0].pageX,
|
||||
y: e.touches[0].pageY
|
||||
}
|
||||
} if (e.changedTouches && e.changedTouches[0]) {
|
||||
return {
|
||||
x: e.changedTouches[0].pageX,
|
||||
y: e.changedTouches[0].pageY
|
||||
}
|
||||
}
|
||||
return {
|
||||
x: e.clientX || 0,
|
||||
y: e.clientY || 0
|
||||
}
|
||||
},
|
||||
resetTouchStatus() {
|
||||
this.direction = ''
|
||||
this.deltaX = 0
|
||||
this.deltaY = 0
|
||||
this.offsetX = 0
|
||||
this.offsetY = 0
|
||||
},
|
||||
touchStart(event) {
|
||||
this.resetTouchStatus()
|
||||
const touch = this.getTouchPoint(event)
|
||||
this.startX = touch.x
|
||||
this.startY = touch.y
|
||||
},
|
||||
touchMove(event) {
|
||||
const touch = this.getTouchPoint(event)
|
||||
this.deltaX = touch.x - this.startX
|
||||
this.deltaY = touch.y - this.startY
|
||||
this.offsetX = Math.abs(this.deltaX)
|
||||
this.offsetY = Math.abs(this.deltaY)
|
||||
this.direction = this.direction || getDirection(this.offsetX, this.offsetY)
|
||||
}
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user