✅Vue选择图像

下载 ✅Vue选择图像
✅Vue选择图像 Vue 2。用于从列表中选择图像的组件 演示 https://mazipan.github.io/vue-select-image/ 安装 #纱 纱添加vue-select-image # NPM npm i vue-select-image -save 如何使用 进口 从“vue-select-image”导入VueSelectImage / /添加样式表 要求(“vue-select-image / dist / vue-select-image.css”) 注册组件 组件:{VueSelectImage} 注册为全局组件 Vue.use (VueSelectImage) 样本阵列图像 [{ id: ' 1 ', src:“https://unsplash.it/200?random”, alt:“alt图像1” },{ id: ' 2 ', src:“https://unsplash.it/200?random”, alt: ' alt Image 2' },{ id: ' 2 ', src:“https://unsplash.it/200?random”, alt: ' alt Image 2'， 禁用:真 }) 场 描述 id 每个图像的唯一id，也将设置为图像DOM上的id属性 src 图像的Src属性 alt 图像Alt属性 禁用 图像禁用，无法选择 模板 单一的选择 & lt; vue-select-image : dataImages = " dataImages” @onselectimage =“onSelectImage”比; & lt; / vue-select-image> onselectimage将返回被选中的参数对象图像 多个选择 & lt; vue-select-image : dataImages = " dataImages” :是多重= " true " : selectedImages = " initialSelected” @onselectmultipleimage =“onSelectMultipleImage”比; & lt; / vue-select-image> onselectmultipleimage将返回被选中的对象图像的参数列表 可用的道具 属性 类型 默认的 描述 : dataImages 数组 [] 将显示的图像数组 : selectedImages 数组 [] 初始选择的图像数组 : isMultiple 布尔 假 标记以启用多个选择 : useLabel 布尔 假 标记以启用显示alt为标签 : rootClass 字符串 vue-select-image 初始化此组件的根元素 : activeClass 字符串 ——选择 类的活动状态，将与:rootClass连接 : h 字符串 汽车 图像高度，例如:‘50px’ w: 字符串 汽车 图片宽度，例如:‘50px’ :限制 数量 0 设置最大的图像可以选择 可用的事件 事件Attr 返回 @onselectimage 图像对象选择 @onselectmultipleimage 对象图像数组已被选中 @onreachlimit 当所选图像的长度达到极限时 有用的方法(源自v1.6.0) 有时你需要通过$refs访问我们的内部方法，你需要知道以下方法: 方法名称 使用 removeFromSingleSelected () 在单一选择模式下重置所选图像 removeFromMultipleSelected () 在多选择模式下从选定列表中移除 resetMultipleSelection (id) 在多选择模式下重置所有选中列表 isExistInArray (id) 如果存在将返回对象图像，如果不存在则未定义 例子 例子可以在这里找到: App.vue app.js 信贷 感谢您的灵感:https://github.com/rvera/image-picker 支持我 通过trakteer 直接支持，给我发邮件 贡献 如果你想投稿，请浏览投稿指南。在内部，您将找到关于开放问题、编码标准和开发注释的指导。 希望对你们所有人都有用。 版权©2017建造❤️iran毛拉本文转载于：http://www.diyabc.com/frontweb/news33279.html