海创软件组-2020920-vue书写官网（element-ui+富文本编辑器）

最新推荐文章于 2024-06-19 18:19:02 发布

chainnnn

最新推荐文章于 2024-06-19 18:19:02 发布

阅读量1k

点赞数

分类专栏：海创软件组文章标签： vue.js

本文链接：https://blog.csdn.net/m0_46239267/article/details/108682001

版权

海创软件组专栏收录该内容

16 篇文章 0 订阅

订阅专栏

使用element-ui组件

首页引入了element-ui的表格，主要运用了
在这里插入图片描述

 <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <el-form-item label="姓名" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="password">
    <el-input v-model="ruleForm.password"></el-input>
  </el-form-item>
  <el-form-item label="组别编号" prop="groupId">
    <el-input v-model.number="ruleForm.groupId"></el-input>
  </el-form-item>
  <el-form-item label="作者编号" prop="authorId">
    <el-input v-model.number="ruleForm.authorId"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>

之后再使用rules对这些进行检查名字、密码、编号等，类似正则表达式

 data() {
      return {
        ruleForm: {
            name: '',
          password: '',
          groupId: '',
          authorId: ''
        },
        rules: {
            name: [
            { required: true, message: '请输入名字', trigger: 'blur' },
            { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
          ],
          password: 
	    	[{required: true,message: '请输入密码',trigger: 'blur'}, 
			{ min: 5,max:10,message: '长度在 5 到 10个字符'}, 
            ],
          groupId: [
            {required: true,message: '请输入组别编号',trigger: 'blur'}, 
			{ min: 1,max:10,message: '长度在 1 到 10个字符'}, 
          ],
          authorId: [
            {required: true,message: '请输入作者编号',trigger: 'blur'}, 
			{ min: 1,max:10,message: '长度在 1 到 10个字符'}, 
          ],
        }
      };
    },

主页

在这里插入图片描述
这里使用了腾讯官网首页的视频，首先需要在vue安装

npm i vue-video --save-dev

之后在main.js引入

//插入视频
import Video from 'video.js'
import 'video.js/dist/video-js.css'
Vue.prototype.$video = Video

之后就可以引入标签，可以设置宽度100%，自动播放一直循环播放，不要进度条等

<video src="https://www.tencent.com/video/index-video.mp4" 
      width="100%" id="video" autoplay loop preload muted x-webkit-airplay="true" airplay="allow" webkit-playsinline="true" playsinline="true"
      class="video1 video"></video>

不负后面的文字隔两秒变化一次

腾讯官网写的文字变化比较复杂，使用了动画等，这里我就做了一个简单的，只能实现简单文字变化，首先初始化状态显示韶华，让文字装在arr数组里面，让change=“arr[this.i]”，i从1开始，当i>arr.length-1时让i=0，此时便可以从韶华再开始循环

在这里插入图片描述

  data () {
    return {
      change:'韶华',
      timer: null,
      i:1
    }
 
  },
  components: {
  },

  mounted () {
        let arr=["韶华","年华","青春"]
        this.timer = setInterval( () => {　
        this.change=arr[this.i]
        this.i++;
        if (this.i>arr.length-1) {
          this.i=0
        }
　　　　　　}, 2000)

  },

div在页面居中

当定义了一个div的时候，想让在页面居中，只需要简单的两行代码

  margin:0 auto;
   text-align: center;

利用定位让文字浮动在标签上

只需要简单的设置一下，可设置.banner_area的定位为relative，让想浮动的文字设置为absolute，再调试left与top，有必要的时候还可以设置z-index的值，让它浮动在最上面
在这里插入图片描述

样式随着路由变化

想要显示的功能是，当在actical的路由下，全部那个位置的文字样式为红色，并且下划线为红色，此时定义了一个routerRed的样式

在这里插入图片描述

 .routerRed{
    color: red;
    border-bottom: 2px solid red;
  }

再设置一个在当前路由下显示样式

 <span style="text-align:left;"@click="$router.push('actical')" :class="{routerRed:'/actical'==$route.path}">全部</span>
        <span   @click="$router.push('recycle')"  :class="{routerRed:'/recycle'==$route.path}">回收站</span>

这里的:class="{routerRed:’/recycle’==$route.path}"就是重点，意思就是如果当前路由是’/recycle’的话，那么便有routerRed这个样式否则就没有

引入富文本编辑器

引入的便是下面的这个富文本
在这里插入图片描述
首先要在官网下载1.4.3.3 Jsp 版本的Ueditor文件。

之后解压放到static里面，这里我命名为UE

之后在main.js中引入，要注意顺序，不可以错乱

//配置富文本编辑器
import '../static/UE/ueditor.config.js'
import '../static/UE/ueditor.all.min.js'
import '../static/UE/lang/zh-cn/zh-cn.js'
import '../static/UE/ueditor.parse.min.js'

然后再到ueditor.config.js中修改一下，在 var URL = window.UEDITOR_HOME_URL || getUEBasePath();前插入window.UEDITOR_HOME_URL = ‘/static/UE/’，这里的UE就是我命名的文件夹
之后可以在组件中新建一个vue文件，将ueditor的代码放进去

<template>
  <div style="width: 100%;height: 500px;margin: 100px auto;">
    <div id="ueditor">
    </div>
  </div>
</template>
<script>
import axios from 'axios'
  export default {
    data () {
      return {
        editor: null,
      }
    },
    mounted () {
     this.editor = UE.getEditor('ueditor') // 初始化UE


    },
    destroyed () {                
      this.editor.destroy()
    }
  }
</script>

此时便可以成功引入富文本编辑器了，但是当你想上传图片等的时候会发现它显示后台配置没有成功
在这里插入图片描述
遇到这个问题，首先打开ueditor.config.js将serverUrl: URL + "jsp/controller.jsp"注释掉

之后再到刚才的ueditor的vue文件中修改一下，将mounted中的代码修改成以下的样子，之后调用你后台的请求路劲便可以成功

 mounted () {
 //创建一个变量，来接收后台配置，之后将result塞到 this.editor = UE.getEditor('ueditor',result)里面
      let result;
      axios.get('http://xxx/ueditor')
      .then((response) => {
        result=response.data
        console.log("result",result);
        console.log(response.data);//请求的返回体
       console.log("result1",result);
        this.editor = UE.getEditor('ueditor',result) // 初始化UE
    
          UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
          UE.Editor.prototype.getActionUrl = function(action) {
            //上传图片
            if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadimage') {
              return 'http://xxx/imgUpload';
              //上传视频
            }else if(action == "uploadvideo"){
              return 'http://xxx/videoUpload';
            }
            //上传附件
            else if(action == "uploadfile"){
              return 'http://xxx/fileUpload';
            }
            //默认
            else {
              return this._bkGetActionUrl.call(this, action);
            }
          }
        
       })
      .catch((error) => {
        console.log(error);//异常
      });


    },

chainnnn

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
海创软件组-2020920-vue书写官网（element-ui+富文本编辑器）

使用element-ui组件首页引入了element-ui的表格，主要运用了 <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="姓名" prop="name"> <el-input v-model="ruleForm.name"><
复制链接

扫一扫