88 lines
2.6 KiB
Vue
88 lines
2.6 KiB
Vue
<template>
|
||
<ciy-header ref="header" title="全局通用组件定义"></ciy-header>
|
||
<view>
|
||
<view class="ciy-card">
|
||
<view class="title">需同时支持:value和v-model</view>
|
||
<view class="content">
|
||
单向和双向数据流处理机制有所不同。<br/>
|
||
组件开发时应同时考虑modelValue和value。<br />
|
||
</view>
|
||
</view>
|
||
<view class="ciy-card">
|
||
<view class="title">通用change事件</view>
|
||
<view class="content">
|
||
change事件参数通用格式: <br/>
|
||
{name:'', from:'', value:obj, lastvalue:obj}<br/>
|
||
from=init，收到父页面的有效数据。<br />
|
||
from=其他，组件内部操作，如点击、完成等。<br/>
|
||
注意: change事件表示数据变化，而非操作变化。<br />
|
||
</view>
|
||
</view>
|
||
<view class="ciy-card">
|
||
<view class="title">通用ciystyle属性</view>
|
||
<view class="content">
|
||
弥补微信小程序问题，通过该属性穿透到组件内部。<br/>
|
||
<text style="color:var(--dag5)">组件上不能添加class、style属性</text>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-card">
|
||
<view class="title">通用disabled属性</view>
|
||
<view class="content">
|
||
组件不可用属性。<br/>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-card">
|
||
<view class="title">通用initevent属性</view>
|
||
<view class="content">
|
||
添加该属性，则初始化后，立即调用onchange事件。<br/>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-card">
|
||
<view class="title">通用left属性</view>
|
||
<view class="content">
|
||
组件默认右对齐，添加该属性可改为传统左对齐。<br/>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-card">
|
||
<view class="title">通用hasmore属性</view>
|
||
<view class="content">
|
||
默认表单数据只有name一项，与数据库原始数据匹配，后端可直接原始存储。<br/>
|
||
打开hasmore后，表单数据增加附属数据，满足前后端扩展数据解析需求。<br/>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-card">
|
||
<view class="title">外部方法首字母大写</view>
|
||
<view class="content">
|
||
外部方法首字母大写，以示区分。<br/>
|
||
内部方法名全小写。<br/>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-card">
|
||
<view class="title">class定义注意事项</view>
|
||
<view class="content">
|
||
组件内所有类名加下划线前缀，<br/>
|
||
避免产生全局惯例类名冲突。<br/>
|
||
</view>
|
||
</view>
|
||
<view class="hr"></view>
|
||
</view>
|
||
</template>
|
||
|
||
<style>
|
||
@import '@/pages/demo/zdemo.css';
|
||
</style>
|
||
|
||
<script>
|
||
import zmixin from '@/pages/demo/zmixin.js';
|
||
export default {
|
||
mixins: [zmixin],
|
||
data() {
|
||
return {
|
||
}
|
||
},
|
||
onLoad() {
|
||
},
|
||
methods: {
|
||
}
|
||
}
|
||
</script> |