uni-vue 元件選中和動態資料圖示的使用
阿新 • • 發佈:2021-09-13
index.vue內使用list元件,元件的功能主要包含1:根據不同資料顯示不同圖示,2:選中事件
實現1:利用:class="iconClass"
實現2:vue基礎 子傳父$emit,父傳子prop
程式碼:父元件index.vue
<template> <view class="content"> <nav-bar></nav-bar> <view class="dg"> <view class="content"> <!-- 搜尋框 --> <view> <input type="text" v-model="search" class="inp"> </view> <!-- <text>{{search}}</text> --> <!-- 列表 --> <f-list v-for="(item,index) in list" :key="index" :item="item" :index="index" @select="select" ></f-list> </view> </view> </view> </template> <script> import navBar from '@/components/common/nav-bar.vue'; import fList from '@/components/common/f_list.vue'; export default { data() {return { title: 'Hello', search: '', list: [{ "type": "dir", "name": "我的資料夾", "create_time": "2019-02-10", "checked": false }, { "type": "images", "name": "我的圖片2", "create_time": "2019-02-10", "checked": false }, { "type": "text", "name": "我的筆記3", "create_time": "2019-02-10", "checked": true }, { "type": "vedio", "name": "我的錄影4", "create_time": "2019-02-10", "checked": false }, { "type": "none", "name": "我的筆記4", "create_time": "2019-02-10", "checked": false }, { "type": "dir", "name": "我的資料夾1", "create_time": "2019-02-10", "checked": false } ] } }, components: { navBar, fList }, onLoad() { }, methods: { select(e){ console.log(e) this.list[e.index].checked = e.item } } } </script> <style> @import url("/common/uni.css"); @import url("/common/my.css"); </style>
子元件程式碼:
<template> <view class="list"> <view class="item"> <view style="width: 10%;text-align: center;line-height: 50rpx;"> <view class="iconClsCon" :class="iconClass"></view> </view> <view style="width: 80%;"> <text>{{item.name}}</text> <text>{{item.create_time}}</text> </view> <view class="radioconten" @click="selectfn" style="width: 10%;align-items: center;"> <text v-if="!item.checked" class="radioicon"></text> <text v-else class="radioicon radioiconed"></text> </view> </view> <!-- {{iconClass}} --> </view> </template> <script> export default { name:'f-list', data(){ return { icons:{ dir:"dirCls", images:"imagesCls", vedio:"vedioCls", text:"textCls", none:"noneCls" } } }, props:{ item:Object, index:[String,Number] }, computed:{ iconClass(){ return this.icons[`${this.item.type}`] } }, methods:{ selectfn(){ this.$emit('select',{ index:this.index, item:!this.item.checked }) } }, created(){ console.log("item-inconclass",this.iconClass,this.item.type) } } </script> <style> @import url("/common/uni.css"); @import url("/common/my.css"); .iconClsCon{ width:30px; height:28px; margin-top:10px; } .dirCls{ background: url(../../static/images/iconwjj.png); background-position: center; background-repeat: no-repeat; background-size:100%; } .imagesCls{ background: url(../../static/images/imagesicon.png); background-position: center; background-repeat: no-repeat; background-size:100%; } .vedioCls{ background: url(../../static/images/vedioicon.png); background-position: center; background-repeat: no-repeat; background-size:100%; } .textCls{ background: url(../../static/images/texticon.png); background-position: center; background-repeat: no-repeat; background-size:100%; } .noneCls{ background: url(../../static/images/nofindtext.png); background-position: center; background-repeat: no-repeat; background-size:100%; } </style>