Element UI隐藏table滚动条
Element UI隐藏table滚动条
当table内容列过多时,可通过height属性设置table高度以固定table高度、固定表头,使table内容可以滚动 现在需要去除滚动条 CSS /deep/.el-table__body-wrapper { &::-webkit-scrollbar { // 整个滚动条 width: 0; // 纵向滚动条的宽度 background: rgba(213,215,220,0.3); border: none; height: 0; } &::-webkit-scrollbar-track { // 滚动条轨道 border: none; } }
 2023-1-7
常用tab标签配色(及组件)
常用tab标签配色(及组件)
常用tab标签配色 标签样式 .red{ padding: 3px 6px; background: #fccac3; font-weight: 400; color: #f53137; border-radius: 3px; } 配色说明 请在本页面最底部查看 组件代码 这里及下面可忽略。 <template> <view class="pageBox"> <view class="box" v-for="item in List" @click="tya(item.url)"> <view class="title"> {{item.title}} </view> <view class="content"> <span v-if="stat">{{stat}}:{{item.status}}</span> <br v-if="stat"> {{desc}}{{item.desc}} </view> <view class="bottom"> <view class="tab" v-show="tab" @click.stop="taburl(item.taburl)"> {{item.tab}} </view> <view class="tab2" v-show="zw" @click.stop="zwurl(item.zwurl)"> {{zw}} </view> <view class="num" v-show="lll"> {{lll}}:{{item.num}} </view> <view v-show="xiangqing" class="caoan" @click.stop="caoan(item.path)"> {{xiangqing}} </view> </view> </view> </view> </template> <script> export default{ name:"hklist", props: { //列表 List: { type: Array, default: function() { return []; } }, tab: { type: Boolean, default: false }, //详情文字 xiangqing: { type: String, default: "" },//状态文字 stat: { type: String, default: "" }, zw: { type: String, default: "" }, //简介文字 desc: { type: String, default: "" },//浏览文字 lll: { type: String, default: "" }, }, data(){ return{ } }, methods:{ tya(e){ uni.navigateTo({ url:e }) }, caoan(e){ uni.navigateTo({ url:e }) }, taburl(e){ uni.navigateTo({ url:e }) }, zwurl(e){ if(e){ uni.navigateTo({ url:e }) }else{ this.$emit("zwchange") } }, } } </script> <style lang="less"> .pageBox{ padding:10px; .box{ border-radius: 10px; background-color: #fff; padding: 10px; margin-bottom: 10px; box-shadow: 0 0px 6px 0 #dfe3e8; .title{ font-weight: 600; margin: 10px 0px; font-size: 18px; } .content{ color: #686b73; font-size: 14px; } .bottom{ display: flex; font-size: 14px; margin: 10px 0px 0px 0px; justify-content: space-between; .tab{ background: #ebf3fe; color: #1492ff; border-radius: 3px; padding: 3px 6px; }.tab2{ background: #fef5eb; color: #faa851; border-radius: 3px; padding: 3px 6px; } .num{ color: #686b73; padding: 3px 6px; } .caoan{ padding: 3px 6px; background: #fccac3; font-weight: 400; color: #f53137; border-radius: 3px; } } } } </style> 使用方法 引入组件 import hklist from "@/components/list/list.vue" 注册组件 components:{ hklist }, 使用组件 <hklist :List="List1" lll="时间" desc="简介:" :tab="true"></hklist> 组件介绍 List:数据源 tab:蓝色标签(按钮) xiangqing:详情文字 stat:状态前面的文字 zw :黄色按钮,不可和lll一起用 desc:简介前面的文字 lll:浏览量前面的文字 @zwchange :自定义方法(黄色按钮) 数据源示例 <hklist zw="满意度评价" :List="List1" stat="交办状态" desc="提出者:" xiangqing="办复信息" :tab="true"></hklist> id:1, title:'您好', desc:'李跃勇', tab:'查看信息', status:'交办', num:'', taburl:'',//标签跳转路径 url:'',//大盒子跳转路径 path:'',//红色按钮跳转路径 zwurl:''//黄色按钮跳转路径 配色说明 普通标签 background(#ebf3fe)color(#1492ff) 成功标签 background(#e8f6e8)color(#44cf85) 警告标签 background(#fccac3)color(#f53137) 灰色标签 background(#ededed)color(#999) 黄色标签 background(#fef5eb)color(#faa851) 粉色标签 background(#fcebef)color(#8a5966) 紫色标签 background(#e5d9fd)color(#795DB3)
 2022-12-16
vue父子组件通信
vue父子组件通信
Vue如何实现父子组件之间的通信功能 在vue组件通信中其中最常见通信方式就是父子组件之中的通信,而父子组件的设定方式在不同情况下又各有不同。最常见的就是父组件为控制组件子组件为视图组件。父组件传递数据给子组件使用,遇到业务逻辑操作时子组件触发父组件的自定义事件。无论哪种组织方式父子组件的通信方式都是大同小异。 父传子 在父组件中,用 v-bind 动态绑定一个自定义属性,用于给子组件传递数据 <template> <div> <child :users="user"></child> </div> </template> <script> import { child } from "./child"; export default { components: { child }, data() { return { user: '张三' }; } }; </script> 在子组件中,使用 props 接收父组件传过来的数据。 <template> <div>{{ users }}</div> </template> <script> export default { props: ["users"] }; </script> 子传父 子组件通过事件的方式,利用 $emit 给父组件传值。 注意:$emit 的第一个参数是父组件自定义事件的方法名,后边的 “value” 是子组件要给父组件传递的数据 <template> <div> <button @click="datas"></button> </div> </template> <script> export default { methods: { datas() { this.$emit("info", value); } } }; </script> 在父组件中,绑定一个自定义事件,用来接收子组件传来的值; <template> <div> <child @info="getInfo"></child> </div> </template> <script> import { child } from "./child"; export default { components: { child }, methods: { getInfo(value) { // value 就是子组件传递过来的数据 } } }; </script> 原文:https://blog.csdn.net/weixin_47013351/article/details/124335003
 2022-11-23
Vue中实现对齐方式选择组件
Vue中实现对齐方式选择组件
效果 主要使用点击给当前元素添加class 创建一个Float组件 <template> <div class="float"> <div class="title">{{ title }}</div> <div class="right-input-wrap"> <div class="alignMode" v-for="(item,index) in 3" :key="index"> <span @click="checkAtv(index)" :class="[cIndex === index?'active':'','align'+(index+1)]"><em></em><em></em><em></em><em></em></span> </div> </div> </div> </template> js部分 <script> export default { name: "float", components: {}, props: { title: { type: String, default: "标题", }, value: { type: [String, Number], default: "", }, prop: { type: String, default: "", }, }, data() { return { cIndex: 1 }; }, computed: { }, watch: {}, methods: { checkAtv(index){ this.cIndex = index; console.log(index) if(index == 0){ this.$emit("update", "left", this.prop); }else if(index == 1){ this.$emit("update", "none", this.prop); }else if(index == 2){ this.$emit("update", "right", this.prop); } } }, created() {}, mounted() {}, beforeMount() {}, }; </script> 样式部分 <style lang="less" scoped> .alignMode span.active { background: #daebff; } .alignMode em:first-child,.alignMode em:nth-child(3) { width: 8px; } .alignMode em:nth-child(2), .alignMode em:nth-child(4) { width: 100%; } .alignMode em:first-child, .alignMode em:nth-child(3) { width: 8px; } .alignMode em:nth-child(2), .alignMode em:nth-child(4) { width: 100%; } .alignMode .align1 { text-align: left; } .alignMode .align2 { text-align: center; } .alignMode .align3 { text-align: right; } .alignMode em { display: inline-block; vertical-align: top; border-top: 1px solid #333; margin: 1px 0; } .alignMode span { display: inline-block; width: 13px; height: 13px; padding: 5px; border-radius: 50%; line-height: 0; margin: 0 2px; cursor: pointer; } .float { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; .left-text { font-size: 12px; color: #888; } .right-input-wrap { display: flex; flex: 1; justify-content: end; // padding-right: 10px; .radio { margin-right: 10px; .text { font-size: 12px; } } } } </style> 使用组件 引入组件(路径自己找) import FloatVue from "../../input2/Float.vue"; export default { name: "home", components: { FloatVue }, 使用 <FloatVue title="对齐方式" @update="propsStyle.float = $event" :value="propsStyle.float" ></FloatVue>
 2022-11-23
小程序组件-父子组件之间的通信
小程序组件-父子组件之间的通信
属性绑定 用于父组件向子组件的指定属性设置数据,仅能设置 JSON 兼容的数据 父组件的data data: { count: 99 }, 父组件的结构 <test4 ccount="{{count}}"></test4> <view> 数据:{{count}}</view> 子组件 /** * 组件的属性列表 */ properties: { ccount:Number }, 子组件的结构 <view>这是组件4</view> <view>父组件传递过来的数据:{{ccount}}</view> 事件绑定 用于子组件向父组件传递数据,可以传递任意数据 在父组件的 js 中,定义一个函数,这个函数即将通过自定义事件的形式,传递给子组件 syncount(e){ console.log(e.detail.value); this.setData({ count1:e.detail.value }) }, 在父组件的 wxml 中,通过自定义事件的形式,将步骤 1 中定义的函数引用,传递给子组件 {{count1}} <test5 bind:sync="syncount"></test5> 在子组件的 js 中,通过调用 this.triggerEvent('自定义事件名称', { / 参数对象 / }) ,将数据发送到父组件 addcount(){ this.setData({ count:this.data.count+1 }) // 调用父组件的sync函数 this.triggerEvent('sync',{value:this.data.count}) } 在父组件的 js 中,通过 e.detail 获取到子组件传递过来的数据 syncount(e){ console.log(e.detail.value); this.setData({ count1:e.detail.value }) }, 获取组件实例 可在父组件里调用this.selectComponent("id或class选择器") ,获取子组件的实例对象,从而直接访问子组件的任意数据和方法。调用时需要传入一个选择器,例如 this.selectComponent(".my-component") 子组件 <view>子组件</view> <view> 姓名:{{username}}===密码:{{password}}===年龄:{{age}} </view> /** * 组件的初始数据 */ data: { username:"tomcat", password:"123", age:18 }, /** * 组件的方法列表 */ methods: { // 修改子组件年龄 addAge(){ this.setData({ age:100 }) } } 父组件 <test3 id="abc"></test3> <view>````````````````````````````````````````````````````````````````````</view> <button bindtap="getComp" type="warn" size="mini">获取子组件的实例对象</button> //获取子组件的实例对象 getComp(){ //参数是一个选择器 const child = this.selectComponent('#abc') console.log(child) console.log("用户名:"+child.data.username) child.addAge(); },
 2022-5-26
小程序组件-插槽
小程序组件-插槽
什么是插槽 在自定义组件的 wxml 结构中,可以提供一个 slot 节点(插槽),用于承载组件使用者提供的 wxml 结构。 单个插槽 在小程序中,默认每个自定义组件中只允许使用一个 slot 进行占位,这种个数上的限制叫做单个插槽。 新建组件-在wxml中添加 <slot></slot> 在app.json里面定义组件 "usingComponents": { "test3":"/components/test3/test3" } 多个插槽 <slot name="a1"></slot> <slot name="a2"></slot> <slot name="a3"></slot> 在组件的js里面开启插槽 options:{ // 开启多个插槽 multipleSlots:true },
 2022-5-26
     跳转到第 页,共 1 页

Theme By Brief 鄂ICP备19010459号

站长统计 sitemap

首页

分类

友链

登录