81 lines
1.9 KiB
Vue
81 lines
1.9 KiB
Vue
<template>
|
||
<ciy-header ref="header" title="ciy-textmore组件"></ciy-header>
|
||
<view>
|
||
<view class="ciy-card">
|
||
<view class="title">内容部分隐藏/点击显示</view>
|
||
<view class="content">
|
||
<view class="tip">
|
||
只显示内容头部部分，点击底部全部显示。<br />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-card">
|
||
<view class="title">效果演示</view>
|
||
<view class="content">
|
||
<ciy-textmore :height="props.height" :maskbg="props.maskbg" @change="chglog('change', $event)">
|
||
<view v-for="n in 100" :key="n"> 占位 {{n}}</view>
|
||
</ciy-textmore>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="ciy-card">
|
||
<view class="title">属性</view>
|
||
<view class="content">
|
||
<view class="prp">height</view>
|
||
<view class="tip">
|
||
高度设定。<br />
|
||
默认: 10em
|
||
</view>
|
||
<ciy-input bb v-model="props.height"></ciy-input>
|
||
<view class="hr"></view>
|
||
<view class="prp">maskbg</view>
|
||
<view class="tip">
|
||
底部半透明过渡背景色，格式#rgba。<br />
|
||
</view>
|
||
<ciy-input bb v-model="props.maskbg"></ciy-input>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-card">
|
||
<view class="title">方法</view>
|
||
<view class="content">
|
||
无
|
||
</view>
|
||
</view>
|
||
<view class="ciy-card">
|
||
<view class="title">事件</view>
|
||
<view class="content">
|
||
<view class="evt">@change</view>
|
||
<view class="tip">
|
||
点击更多事件<br />
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="log" v-for="(item, index) in eventlog" :key="index">
|
||
<text class="code">{{eventlog.length - index}}</text>
|
||
{{item}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="hr"></view>
|
||
</view>
|
||
</template>
|
||
|
||
<style scoped>
|
||
@import '@/pages/demo/zdemo.css';
|
||
</style>
|
||
|
||
<script>
|
||
import zmixin from '@/pages/demo/zmixin.js';
|
||
export default {
|
||
mixins: [zmixin],
|
||
data() {
|
||
return {
|
||
props: {
|
||
height: '10em',
|
||
maskbg: 'var(--bg2)'
|
||
}
|
||
}
|
||
},
|
||
onLoad() {},
|
||
methods: {}
|
||
}
|
||
</script> |