视频电商网站实战 - 视频上传:标签编辑框效果快速实现
2017-02-18 15:58
681 查看
本节我们来完成tag框,输入关键字后回车即可出现标签增加和删除效果。
我们可以用一个开源组件:https://github.com/matiastucci/vue-input-tag
安装: cd到我们的项目根目录下执行
安装完成,我们的
然后应用到我们的项目中.
来到视频发布组件publish.vue
1.js部分
此时会报错
这是因为我们的vue-input-tag路径在
然后继续报错:
我们来到
解决方法:
先安装
然后修改我们项目的(根目录下的)
(主要,修改了核心配置文件后,要重启服务:npm run dev)。
2.好了,继续完成我们的功能。
在引入了组件之后,需要加载进去
3.模板上使用组件
发布视频组件全部代码如下:
我们可以用一个开源组件:https://github.com/matiastucci/vue-input-tag
安装: cd到我们的项目根目录下执行
npm install vue-input-tag --save
安装完成,我们的
node_modules目录中会多一个
vue-input-tag目录。
然后应用到我们的项目中.
来到视频发布组件publish.vue
1.js部分
//引入组件 import InputTag from 'vue-input-tag';
此时会报错
Module parse failed:xxxxxxxxxxxxxxxxxxxxxxx You may need an appropriate loader to handle this file type.
这是因为我们的vue-input-tag路径在
node_modules中,而我们的webpack配置文件webpack.config.js中排错了这个目录。需要修改如下:
//修改前 {test:/\.vue$/,loader:'babel!vue',exclude:/node_modules/}, //修改后 {test:/\.vue$/,loader:'babel!vue'},
然后继续报错:
Module build failed: ReferenceError: Unknown plugin "transform-runtime" specified in xxxxxxxxxxxxxxxx
我们来到
node_modules/vue-input-tag/.babelrc:
{ "presets": ["es2015", "stage-2"], "plugins": ["transform-runtime"], "comments": false }
解决方法:
先安装
npm install babel-plugin-transform-runtime --save npm install --save-dev babel-preset-stage-2
然后修改我们项目的(根目录下的)
.babelrc:
{ "presets":["es2015","stage-2"], "plugins": ["transform-runtime"] }
(主要,修改了核心配置文件后,要重启服务:npm run dev)。
2.好了,继续完成我们的功能。
在引入了组件之后,需要加载进去
components:{ 'input-tag':InputTag, //注册组件 }
3.模板上使用组件
<el-form-item label="标签" prop="v_tags"> <input-tag :tags="video.v_tags" placeholder="输入标签后回车"></input-tag> </el-form-item>
:tags="video.v_tags"中,我们在
data()的
video中 添加了
v_tags数组,input-tag组件添加的标签会加入这个数组。
data(){ return { video:{ v_title:'', v_class:2, v_pic:{name:'',url:'',id:0}, v_tags:[], }, isShowPic:false, }
发布视频组件全部代码如下:
<template>
<div>
<el-dialog title="图片预览" v-model="isShowPic" size="small">
<span>
<img :src="video.v_pic.url">
</span>
<span slot="footer" class="dialog-footer">
</span>
</el-dialog>
<el-form :model="video" label-width="100px" class="demo-ruleForm">
<el-col :span="12">
<el-form-item label="视频标题" prop="v_title">
<el-input v-model="video.v_title" placeholder="请输入视频标题"></el-input>
</el-form-item>
<el-form-item label="视频分类" prop="v_class">
<el-select v-model="video.v_class" placeholder="请选择">
<el-option
v-for="item in this.$store.getters.navForVideoClass"
:label="item.nav_text"
:value="item.nav_id"
>
{{item.nav_text}}
</el-option>
</el-select>
</el-form-item>
<el-form-item label="视频封面" prop="v_pic">
<el-upload
action="http://localhost/yiiserver/web/index.php/video/upload"
type="drag"
:thumbnail-mode="true"
:on-preview="handlePreview"
:on-remove="handleRemove"
:on-success="handleSuccess"
:multiple="false"
name="Uploader[file]"
>
<i class="el-icon-upload"></i>
<div class="el-dragger__text">将文件拖到此处,或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
</el-form-item>
<el-form-item label="标签">
<input-tag :tags="video.v_tags" placeholder="输入标签后回车"></input-tag>
</el-form-item>
<el-form-item label="测试按钮">
<el-button type="primary" @click="testBtn">测试按钮</el-button>
</el-form-item>
</el-col>
<el-col :span="12"></el-col>
</el-form>
</div>
</template>
<script>
//引入组件 import InputTag from 'vue-input-tag';
export default{
data(){
return {
video:{
v_title:'',
v_class:2,
v_pic:{name:'',url:'',id:0},
v_tags:[],
},
isShowPic:false,
}
},
methods: {
handleRemove(file, fileList) {
//移除图片
console.log(file, fileList);
this.video.v_pic.url = '';
this.video.v_pic.name = '';
},
handlePreview(file) {
//预览图片
console.log(file);
this.isShowPic = true;
},
handleSuccess(file){
//响应成功
console.log(file);
if(file.status ==1){
//保存后端返回来的数据
this.video.v_pic.url = file.url;
this.video.v_pic.name = file.name;
this.video.v_pic.id = file.img_id;
}else{
alert('上传失败,,请稍后再试');
}
},
testBtn(){
alert(this.video.v_tags);
}
},
components:{
'input-tag':InputTag, //注册组件
}
}
</script>
相关文章推荐
- Java实现视频网站的视频上传、视频转码、视频关键帧抽图, 及视频播放功能
- Java实现视频网站的视频上传、视频转码、视频关键帧抽图, 及视频播放功能
- Java实现视频网站的视频上传、视频转码、视频关键帧抽图, 及视频播放功能 视频网站中提供的在线视频播放功能,播放的都是FLV格式的文件,它是Flash动画文件,可通过Flash制作的播放器来播
- Java实现视频网站的视频上传、视频转码、视频关键帧抽图, 及视频播放功能
- Java实现视频网站的视频上传、视频转码、视频关键帧抽图, 及视频播放功能
- Java实现视频网站的视频上传、视频转码、视频关键帧抽图, 及视频播放功能
- Java实现视频网站的视频上传、视频转码、视频关键帧抽图, 及视频播放功能
- Java实现视频网站的视频上传、视频转码、视频关键帧抽图, 及视频播放功能
- 网站实现视频上传、转码、截图及在线播放功能
- 织梦网站巧用标签实现图片自动Alt功能,强化织梦seo效果
- Java实现视频网站的视频上传、视频转码、视频关键帧抽图, 及视频播放功能
- HTML5 vedio标签与canvas的结合实现视频同步模糊效果
- Java实现视频网站的视频上传、视频转码、视频关键帧抽图, 及视频播放功能
- Java实现视频网站的视频上传、视频转码、视频关键帧抽图, 及视频播放功能
- 视频电商网站实战 - 构建视频提交页面:视频封面上传(上)
- Java实现视频网站的视频上传、视频转码、视频关键帧抽图, 及视频播放功能
- Java实现视频网站的视频上传、视频转码、视频关键帧抽图, 及视频播放功能
- 织梦网站巧用标签实现图片自动Alt功能,强化织梦seo效果
- Android Fragment应用实战,使用碎片向ActivityGroup说再见(使用Fragment实现底部标签页效果)
- Java实现视频网站的视频上传、视频转码、视频关键帧抽图, 及视频播放功能