Vue 单文件元件 — vTabs
简书原文
这是我做了第二个单文件元件
第一个在这里vCheckBox
这次这个叫vTabs,用于操作标签页
演示DEMO
演示DEMO2 - 子组件模式及别名
演示DEMO3 - 极简模式
示例:
html
<div id="tabs2"></div>
<div id="tab-1">1</div>
<div id="tab-2">2</div>
<div id="tab-3">3</div>
js
var tabs2 = new vTabs({el: "#tabs2",data: {tabs: [{ text: "html", el: "#tab-1" },{ text: "javascript", el: "#tab-2" },{ text: "其他", disabled: true, el: "#tab-3" }]}
});
设计思路
设计部分几乎和vCheckBox一毛一样:
- 提供
template
供后期拓展 - 处理
props
保证在子组件时的可用 - 所有样式内联,保证单文件可用
- 提供事件支持(目前仅实现了
changed
事件stateChanged
,tabAdded
,tabRemoved
尚不可用)
唯一比较特别的地方就是可以使用极简模式
watch: {tabs: function(value) {if (value == null) {this.tabs = [];return;}if (value.constructor !== Array) {this.tabs = [value];return;}var id = this.tabFields.id,el = this.tabFields.el,text = this.tabFields.text,disabled = this.tabFields.disabled;function set(obj, name, value) {if (typeof name === "string") Vue.set(obj, name, value);return obj;}for (var i = 0; i < value.length; i++) {var val = value[i];if (typeof val !== "object") {val = set({},text, val);}if (!val.hasOwnProperty(id)) {set(val, id, Math.random().toString());}if (!val.hasOwnProperty(disabled)) {set(val, disabled, false);}if (val.hasOwnProperty(el) && typeof val[el] === "string") {set(val, el, document.querySelector(val[el]));}value[i] = val;}if (value.length === 0) {if (this.selectedIndex !== -1) {this.selectedIndex = -1;}} else if (this.selectedIndex < 0 || this.selectedIndex >= value.length) {this.selectedIndex = 0;}},
观察(watch)tabs
的变化,如果只是string
就作为text使用,其他属性如果不存在即补全。
由于初始化data
时并不会触发watch,所以在created
中尝试触发watch
created: function() {this.tabs = [].concat(this.tabs);
},
源码
GitHub
说明文档过两天有时间再补,顺便吧那3个事件一起实现了,最近睡眠验证不足,睡觉了。。。
转载于:https://www.cnblogs.com/blqw/p/6751627.html
Vue 单文件元件 — vTabs相关推荐
- vue单文件props写法_详解Vue 单文件组件的三种写法
详解Vue 单文件组件的三种写法 JS构造选项写法 export defaul { data, methods, ...} JS class写法 @Component export default c ...
- VSCode环境下配置ESLint 对Vue单文件的检测
本文介绍了在VSCode环境下如何配置eslint进行代码检查,并介绍了如何对.vue单文件进行支持. ESLint 安装 1.在工程根目录下,安装eslint及初始化 $ npm install e ...
- Vue 单文件组件||Vue 单文件组件的基本用法||webpack 中配置 vue 组件的加载器|| 在 webpack 项目中使用 vue
Vue 单文件组件 传统组件的问题和解决方案 1. 问题 1. 全局定义的组件必须保证组件的名称不重复 2. 字符串模板缺乏语法高亮,在 HTML 有多行的时候,需要用到丑陋的 \ 3. 不支持 CS ...
- Vue单文件组件与vue-loader
单文件组件 Vue.js是一个渐进式的js框架,在使用wewbpack构建Vue项目时,可以使用一种新的构建模式: .vue单文件组件. 就是一个后缀名为.vue的文件,在webpack中使用vue- ...
- Vue单文件中引入背景图片时,四周有空白的问题
Vue单文件中引入背景图片时,四周有空白的问题 问题背景 初始引入背景图 更新后的背景图设置 问题背景 近期公司有个管理系统前后端分离,但是前端人员不够,只能我们后端来凑,而在前端的开发过程中总是遇到 ...
- vue单文件自定义指令的封装
vue单文件自定义指令的封装 第一步(封装一个js文件) // 暴露并配置指令 功能添加背景颜色 export const mycolor = {// 解析结构完成后自动运行钩子函数inser ...
- Vue单文件组件的使用
项目搭建完成后需要分别对 main.js , index.html , App.vue 文件进行编写代码 index.html <!DOCTYPE html> <html lang= ...
- Vue单文件组件环境配置
单文件组件不能直接运行使用,需要依赖node项目对其进行解析打包,在使用之前需要先进行环境配置 安装node版本管理工具nvm curl -o- https://raw.githubuserconte ...
- Vue单文件组件基础模板
背景 相信大家在使用Vue开发项目时,基本都是以单文件组件的形式开发组件的,这种方式好处多多: 1.代码集中,便于开发.管理和维护 2.可复用性高,直接将vue文件拷贝到新项目中 我暂时就想到这两点, ...
最新文章
- jquery控制只监听数字_jQuery老矣,尚能饭否
- 计算机丢失cv210.dll,cv210.dll文件免费版
- 高可用keepalived实例
- P1832 A+B Problem(再升级)
- iphone图片编辑画笔_苹果超强新功能上线!它打开了 iPhone 摄影的新大门
- tensorflow实现回归
- 学画画软件app推荐_今日推荐:拍照摄影APP之稀缺软件篇
- 在Linux下如何查CC攻击?
- C++设计模式10--命令模式(一)--降低请求发送者与接收者耦合
- ESP8266的Arduino IDE下载和TTL下载
- u检验中的查u界值表_统计学中,知道u值,如何确定P值,是通过查表吗
- PP视频(PPTV聚力)web接口分析
- 自定義 ForkJoinPool 線程池,并消除classLoader加载失败的问题
- SAP - LVM - 低价值易耗品盘点全流程
- ionic3实现app启动时进行网络监测功能
- 基本数据结构(算法导论)与python
- java创始人现在在哪里直播,三年败光120亿,他曾是某电商巨头创始人,如今却靠直播度日!...
- 音乐播放(Toggle PlayerPrefs)
- [nlp] 小傻学数据预处理
- Flash游戏的衰败原因