add v-cloak

杨泽宇
1 parent 90bc89ca
Showing 5 changed files with 47 additions and 10 deletions
src/css/test.css
src/html/index.html
src/js/audios.js
src/js/config.js
webpack.config.js
-[v-cloak]{
-  display: none;
-}
 .diy-reset {
   margin: 0; 
   padding: 0
@@ -12,6 +12,11 @@
   <link rel="bookmark" href="/cms.ico" />
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-plus@1.1.0-beta.12/theme-chalk/index.css">
   <script src="https://cdn.jsdelivr.net/npm/vue@3.2.11/dist/vue.global.js"></script>
+  <style>
+    [v-cloak] {
+      display: none;
+    }
+  </style>
 </head>
 <body id="body" class="diy-reset">
@@ -53,7 +58,7 @@
             <el-input v-model.trim="form.mixing" :maxlength="15" placeholder="请输入混音人名字"></el-input>
           </el-form-item>
           <el-form-item :label="labels.lyric" class="diy-flex-100" prop="lyric">
-            <el-input v-model="form.lyric" maxlength="2500" show-word-limit type="textarea" :rows="10"
+            <el-input v-model="form.lyric" maxlength="2500" :minlength="20" show-word-limit type="textarea" :rows="10"
               placeholder="请输入歌词"></el-input>
           </el-form-item>
           <el-form-item :label="labels.phone" class="diy-flex-50" prop="phone">
@@ -3,7 +3,7 @@ require(&quot;./../css/test.css&quot;);
 // Init Vue
 const Audio = {
   created() {
-    parent.postMessage(1000, '*')
+    parent.postMessage(1000, "*");
   },
   data() {
     return {
@@ -63,6 +63,14 @@ const Audio = {
         songwriter: [
           { required: false, trigger: "change", message: "请输入作曲人名字" },
         ],
+        lyric: [
+          {
+            required: false,
+            trigger: "change",
+            message: "请输入符合要求的歌词，至少20个字，最多不能超过2500个字",
+            validator: all.validateLyric,
+          },
+        ],
       },
       uploadUrl: "",
@@ -86,6 +94,7 @@ const Audio = {
         this.rules.singer[0].required = false;
         this.rules.songwriter[0].required = false;
         this.rules.lyricist[0].required = true;
+        this.rules.lyric[0].required = true;
       } else if (data == 1278) {
         // 成品
         this.rules.singer[0].required = true;
@@ -93,6 +102,7 @@ const Audio = {
         this.rules.audioId[0].required = true;
         this.rules.lyricist[0].required = false;
         this.rules.songwriter[0].required = false;
+        this.rules.lyric[0].required = false;
       } else if (data == 1280) {
         // 作曲
         this.rules.songwriter[0].required = true;
@@ -100,6 +110,7 @@ const Audio = {
         this.rules.audioId[0].required = true;
         this.rules.singer[0].required = false;
         this.rules.lyricist[0].required = false;
+        this.rules.lyric[0].required = false;
       } else if (data == 1281) {
         // 其他
         this.rules.songwriter[0].required = false;
@@ -107,6 +118,7 @@ const Audio = {
         this.rules.audioId[0].required = true;
         this.rules.singer[0].required = false;
         this.rules.lyricist[0].required = false;
+        this.rules.lyric[0].required = false;
       }
     },
     // 文件数量超上限响应
@@ -176,7 +188,8 @@ const Audio = {
             const fileSaveObj = {
               videoId: null,
-              multipleCategory: 100005 + "/" + this.getCategoryText(this.form.channelId),
+              multipleCategory:
+                100005 + "/" + this.getCategoryText(this.form.channelId),
               tag: this.getChannelText(this.form.channelId),
               ts: this.getTs(),
               timestamp: this.getTimeStamp(),
@@ -188,7 +201,8 @@ const Audio = {
               fileSize: this.form.audioFile.raw.size,
               ts: this.getTs(),
               timestamp: this.getTimeStamp(),
-              multipleCategory: 100005 + "/" + this.getCategoryText(this.form.channelId),
+              multipleCategory:
+                100005 + "/" + this.getCategoryText(this.form.channelId),
               // masterId: all.secretUrls.masterIdDev,
               masterId: all.secretUrls.masterIdMaster,
             };
@@ -309,7 +323,7 @@ const Audio = {
                   fileWholeObj.subscription =
                     fileWholeObj.observable.subscribe(observer);
                 } else {
-                  this.reset()
+                  this.reset();
                   this.$message({
                     type: "error",
                     duration: 0,
@@ -152,6 +152,26 @@ const validatePhone = (rules, value, callback) =&gt; {
   }
 };
+const validateLyric = (rules, value, callback) => {
+  if(rules.required) {
+    if(value && value.length >= 20) {
+      callback()
+    } else {
+      callback(new Error(rules.message))
+    }
+  } else {
+    if(value) {
+      if(value.length < 20) {
+        callback(new Error(rules.message))
+      } else {
+        callback()
+      }
+    } else {
+      callback()
+    }
+  }
+}
+
 const validateName = (rules, value, callback) => {
   if (value.length < 1) {
     callback(new Error("请填写歌曲名称"));
@@ -378,6 +398,7 @@ export {
   validateVideoFormat,
   validateNameLength,
   validateVideoSize,
+  validateLyric,
   signFunction,
   parseQueryString,
   request,
@@ -11,7 +11,7 @@ module.exports = {
   entry: path.join(__dirname, "src", "/js/audios.js"), //__dirname指的是当前目录,是目录形成绝对路径
   output: {
     //输入的文件名
-    filename: "dada.js",
+    filename: "cloak.js",
     // filename: '[name].[hash:7].js',
     publicPath: "/",
     //输入的路径  webpack会自动打包生成
@@ -25,7 +25,7 @@ module.exports = {
       //文件中找到的路径
       template: path.join(__dirname, "src", "html/index.html"),
       //打包输出的路径
-      filename: "dada.html",
+      filename: "cloak.html",
     }),
     new CleanWebpackPlugin(),
     new JavaScriptObfuscator(