@shijiu/jsview-vue-samples 2.0.1021 → 2.0.1073

package/Basic/components/div/DivBackground.vue

@@ -43,7 +43,7 @@ import iconImgPath from "../../assets/icon.png";
         left: 92,
         width: 90,
         height: 40,
-        backgroundImage: 'linear-gradient(rgba(255, 0, 0, 1.0), rgba(0,255,1.0))',
+        backgroundImage: 'linear-gradient(rgba(255, 0, 0, 1.0), rgba(0,255,0,1.0))',
       }"
     >
       gradient

package/Basic/components/div/DivCssVar.vue

@@ -4,15 +4,24 @@ let timerId = -1;
 let state = reactive({
   foreColor: "#FF0000",
   backColor: "#00FF00",
+  width:65,
+  transX: 0,
+  transY: 0,
 });
 onMounted(() => {
   timerId = setInterval(() => {
     if (state.foreColor == "#00FF00") {
       state.foreColor = "#FF0000";
       state.backColor = "#00FF00";
+      state.width = 65;
+      state.transX = 50;
+      state.transY = 0;
     } else {
       state.foreColor = "#00FF00";
       state.backColor = "#FF0000";
+      state.width = 55;
+      state.transX = 0;
+      state.transY = 50;
     }
   }, 3000);
 });
@@ -27,27 +36,36 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div class="block">顶级元素的CSS class中包含变量 (不推荐)</div>
+  <div class="block-var">CSS class中包含变量</div>
+
+  <div class="block-kf-var">CSS keyframes中包含变量</div>
 
-  <div
-    :style="{
-      left: 70,
-      width: 65,
-      height: 65,
-      color: state.foreColor,
-      backgroundColor: state.backColor,
-    }"
-  >
-    子级元素CSS class中包含变量
-  </div>
 </template>
 
 <style scoped>
-.block {
+.block-var {
+  width: v-bind('state.width + 10');
+  height: 65;
+  color: v-bind('state.foreColor');
+  background-color: v-bind('state.backColor');
+}
+
+.block-kf-var {
+  left: 100;
   width: 65;
   height: 65;
-  /* word-wrap: break-word; */
-  color: v-bind(state.foreColor);
-  background-color: v-bind(state.backColor);
+  color: v-bind('state.foreColor');
+  background-color: v-bind('state.backColor');
+  animation: AnimTranslate 2s linear infinite;
 }
+
+@keyframes AnimTranslate {
+  from {
+    transform: translate3d(0, v-bind('state.transY'), 0);
+  }
+  to {
+    transform: translate3d(v-bind('state.transX'), 0, 0);
+  }
+}
+
 </style>

package/CommonUtils/ResourceData.js

@@ -0,0 +1,11 @@
+let dataUrl=""
+
+
+const setDataUrl=(url)=>{
+    dataUrl = url
+}
+
+const getDataUrl=()=>{
+    return dataUrl
+}
+export { getDataUrl, setDataUrl}

package/CommonUtils/getSearchQuery.js

@@ -0,0 +1,44 @@
+const getSearchQuery = (url = '', obj, paramPosition) => {
+    const [searchPart = '', hashPart = ''] = url.split('#');
+    // eslint-disable-next-line no-nested-ternary
+    const position = (paramPosition === undefined) ? ((searchPart || !hashPart) ? 0 : 1) : paramPosition;
+    const setPart = position === 0 ? searchPart : hashPart;
+    const [base = '', search = ''] = setPart.split('?');
+    const originParams = {};
+    const combine = (prefix, value) => (value ? `${prefix}${value}` : '');
+    const getSearch = (data = {}) => {
+      const result = [];
+      Object.keys(data).forEach((key) => {
+        const val = data[key];
+        if (val !== null && val !== undefined) {
+          result.push([key, encodeURIComponent(val)].join('='));
+        }
+      });
+      return combine('?', result.join('&'));
+    };
+    search
+      .split('&')
+      .filter((x) => x)
+      .forEach((keyvalue) => {
+        const [key = '', value = ''] = keyvalue.split('=');
+        originParams[key] = decodeURIComponent(value);
+      });
+    if (obj) {
+      // 赋值
+      Object.assign(originParams, obj);
+      switch (position) {
+        case 0:
+          // 参数在search部分,拼接方式为base+getSearch+hashPart
+          return `${base}${getSearch(originParams)}${combine('#', hashPart)}`;
+        case 1:
+          // 参数在hash部分,拼接方式为searchPart+ base+getSearch
+          return searchPart + combine('#', base + getSearch(originParams));
+        default:
+          break;
+      }
+    } else {
+      // 取值
+      return originParams;
+    }
+  }
+  export {getSearchQuery}

package/CssPreprocessor/Less/App.vue

@@ -27,6 +27,6 @@ export default {
 .root {
   top: 10; left: 10;
   width: 1250; height: 670;
-  background-color: rgba(200, 200, 200, 1)
+  background-color: #d6e1ce
 }
 </style>

package/CssPreprocessor/Less/components/less-group1/LessComments.vue

@@ -11,7 +11,7 @@ export default {
     + '.less-comments {\n'
     + '  // less 单行注释\n'
     + '  /* less 多行注释 */\n'
-    + '  color: #00FF00;\n'
+    + '  color: #126085;\n'
     + '}'}}
   </div>
 </div>
@@ -23,7 +23,7 @@ export default {
 .less-comments {
   // less 单行注释
   /* less 多行注释 */
-  color: #00FF00;
+  color: #126085;
   font-size: 14;
 
   left: 10;

package/CssPreprocessor/Less/components/less-group1/LessConditionals.vue

@@ -10,7 +10,7 @@ export default {
     + '.less-conditional {\n'
     + '  color: if(@show-green,\n'
     + '            #00FF00,\n'
-    + '            #FF0000);\n'
+    + '            #126085);\n'
     + '}\n'}}
   </div>
 </div>
@@ -21,7 +21,7 @@ export default {
 .less-conditional {
   color: if(@show-green,
             #00FF00,
-            #FF0000);
+            #126085);
 
   font-size: 14;
   left: 10;

package/CssPreprocessor/Less/components/less-group1/LessVariables.vue

@@ -6,14 +6,14 @@ export default {
 <template>
 <div>
   <div class="less-var-general">
-    {{'@my-color: #00FF00; // 一般变量\n'
+    {{'@my-color: #126085; // 一般变量\n'
     + '.less-var-general {\n'
     + '  color: @my-color;\n'
     + '}'}}
   </div>
   <div class="less-var-enclosing">
     {{'.less-var-enclosing {\n'
-    + '  @my-color: #0000FF; // 局部变量\n'
+    + '  @my-color: #5a4ba4; // 局部变量\n'
     + '  color: @my-color;\n'
     + '}'}}
   </div>
@@ -25,20 +25,20 @@ export default {
 .less-var-general {
   color: @my-color;
 
-  font-size: 14;
+  font-size: 12;
   left: 10;
   top: 0;
   width: 220;
   height: 140;
 }
 
-@my-color: #00FF00;
+@my-color: #126085;
 .less-var-enclosing {
   // 只在 .less-enclosing 里有效，局部作用域
-  @my-color: #FF0000; // 局部变量
+  @my-color: #5a4ba4; // 局部变量
   color: @my-color;
 
-  font-size: 14;
+  font-size: 12;
   left: 10;
   top: 68;
   width: 220;

package/CssPreprocessor/Less/components/less-group2/LessIteration.vue

@@ -23,7 +23,7 @@ each(range(1, 14, 13), {
 })
 
 .less-bounds {
-  color: #00FF00;
+  color: #126085;
   left: 10;
   top: 3;
   width: 230;

package/CssPreprocessor/Less/components/less-group2/LessMethods.vue

@@ -6,7 +6,7 @@ export default {
 <template>
 <div>
   <div class="less-method-general">
-    {{'不支持，使用mixins'}}
+    {{'不支持函数，要用mixins替代'}}
   </div>
 </div>
 </template>
@@ -18,7 +18,7 @@ export default {
 .less-method-general {
   .getsize(7);
 
-  color: #000000;
+  color: #5a4ba4;
   left: 10;
   top: 10;
   width: 240;

package/CssPreprocessor/Less/components/less-group3/LessExtends.vue

@@ -7,7 +7,7 @@ export default {
 <div>
   <div class="less-extend">
     {{'.less-basic {\n'
-    + '  color: #00FF00;\n'
+    + '  color: #126085;\n'
     + '}\n'
     + '.less-extend :extend(.less-basic) {\n'
     + '  font-size: 14;\n'
@@ -18,7 +18,7 @@ export default {
 
 <style scoped lang='less'>
 .less-basic {
-  color: #00FF00;
+  color: #126085;
 }
 
 .less-extend :extend(.less-basic) {

package/CssPreprocessor/Less/components/less-group3/LessNesting.vue

@@ -7,7 +7,7 @@ export default {
 <div class="less-root">
   <div class="less-rule-nesting">
     {{'.less-root {\n'
-    + '  color: #00FF00;\n'
+    + '  color: #126085;\n'
     + '  .less-rule-nesting { // 规则嵌套\n'
     + '    font-size: 14;\n'
     + '  }\n'
@@ -19,7 +19,7 @@ export default {
   </div>
   <div class="less-root-parent-selector">
     {{'.less-root {\n'
-    + '  color: #00FF00;\n'
+    + '  color: #126085;\n'
     + '  &-parent-selector { // 父选择器\n'
     + '    font-size: 14;\n'
     + '  }\n'
@@ -30,7 +30,7 @@ export default {
 
 <style scoped lang='less'>
 .less-root {
-  color: #00FF00;
+  color: #126085;
 
   .less-rule-nesting { // 规则嵌套
     font-size: 14;
@@ -42,7 +42,7 @@ export default {
   }
 
   .less-prop-nesting { // 属性嵌套(不支持)
-    color: #000000;
+    color: #5a4ba4;
     font-size: 14;
 
     left: 10;

package/CssPreprocessor/Less/components/less-group4/LessKeyframes.vue

@@ -29,7 +29,7 @@ export default {
 }
 
 .less-keyframes {
-  color: #00FF00;
+  color: #126085;
   font-size: 14;
 
   left: 10;

package/CssPreprocessor/Less/components/less-group4/LessMaps.vue

@@ -24,7 +24,7 @@ export default {
 .less-map {
   font-size: @font-sizes[medium];
 
-  color: #00FF00;
+  color: #126085;
   left: 10;
   top: 3;
   width: 230;

package/CssPreprocessor/Less/components/less-group4/LessMixins.vue

@@ -24,7 +24,7 @@ export default {
 .less-mixin {
   .font(14);
 
-  color: #00FF00;
+  color: #126085;
   left: 10;
   top: 0;
   width: 230;

package/CssPreprocessor/Less/components/less-group5/LessImporting.vue

@@ -16,9 +16,13 @@ export default {
     + 'TextSettings.less\n'
     + '\n'
     + '.less-imported {\n'
-    + '  color: #00FF00;\n'
-    + '  font-size: 14;\n'
-    + '}'}}
+    + '  color: #126085;\n'
+    + '  font-size: 14;\n'}}
+     <div class="less-nesting">
+      {{'   .less-nesting {\n'
+      + '     color: #5149a1;\n'
+      + '    }' }}
+    </div>
   </div>
 </div>
 </template>

package/CssPreprocessor/Less/components/less-group5/TextSettings.less

@@ -1,4 +1,11 @@
 .less-imported {
-  color: #00FF00;
+  color: #126085;
   font-size: 14;
+  .less-nesting{
+    color:#5149a1;
+    left: 0;
+    top: 230;
+    width: 230;
+    height: 280;
+   }
 }

package/CssPreprocessor/Scss/App.vue

@@ -27,6 +27,6 @@ export default {
 .root {
   top: 10; left: 10;
   width: 1250; height: 670;
-  background-color: rgba(200, 200, 200, 1)
+  background-color: #d6e1ce
 }
 </style>

package/CssPreprocessor/Scss/components/scss-group1/ScssComments.vue

@@ -6,24 +6,25 @@ export default {
 <template>
 <div>
   <div class="scss-comments">
-    {{'// scss 单行注释\n'
-    + '/* scss 多行注释 */\n'
+    {{'// scss 单行写法样例\n'
+    + '/* scss 多行写法样例 */\n'
     + '.scss-comments {\n'
-    + '  // scss 单行注释\n'
-    + '  /* scss 多行注释 */\n'
-    + '  color: #00FF00;\n'
+    + '  // scss 单行注释样例\n'
+    + '  /* scss 多行注释样例 */\n'
+    + '  color: #126085;\n'
     + '}'}}
   </div>
 </div>
 </template>
 
 <style scoped lang="scss">
-// scss 单行注释
-/* scss 多行注释 */
+// scss 单行写法样例
+/* scss 多行写法样例 */
 .scss-comments {
-  // scss 单行注释
-  /* scss 多行注释 */
-  color: #00FF00;
+  // scss 单行注释样例
+  /* scss 多行注释样例 */
+  // color: #3d73b2;
+  color:#126085;
   font-size: 14;
 
   left: 10;

package/CssPreprocessor/Scss/components/scss-group1/ScssConditionals.vue

@@ -1,6 +1,7 @@
-<script>
-export default {
-}
+<script setup>
+// TODO review: 撰写setTimeout + v-bind控制show-green颜色
+// unmount去掉setTimeout
+
 </script>
 
 <template>
@@ -11,7 +12,7 @@ export default {
     + '  @if $show-green {\n'
     + '    color: #00FF00;\n'
     + '  } @else {\n'
-    + '    color: #FF0000;\n'
+    + '    color: #126085;\n'
     + '  }\n'
     + '}\n'}}
   </div>
@@ -19,12 +20,13 @@ export default {
 </template>
 
 <style scoped lang="scss">
-$show-green: false;
+$show-green: false;   /* 不支持在style里面声明的变量动态改变 */
 .scss-conditional {
   @if $show-green {
     color: #00FF00;
   } @else {
-    color: #FF0000;
+    // color: #7b78a8;
+    color:#126085
   }
 
   font-size: 14;

package/CssPreprocessor/Scss/components/scss-group1/ScssOperations.vue

@@ -19,8 +19,8 @@ export default {
 
 <style scoped lang="scss">
 .scss-op {
-  color: #00FF00;
-  font-size: 20 - 6;
+  color: #126085;   /* 不支持乘法样例 如：color: #001100 * 16 */
+  font-size: 20 - 6; /* 此处为运算符'-'样例 */
 
   left: 10;
   top: 3;

package/CssPreprocessor/Scss/components/scss-group1/ScssVariables.vue

@@ -6,14 +6,14 @@ export default {
 <template>
 <div>
   <div class="scss-var-general">
-    {{'$my-color: #00FF00; // 一般变量\n'
+    {{'$my-color: #126085; // 一般变量\n'
     + '.scss-var-general {\n'
     + '  color: $my-color;\n'
     + '}'}}
   </div>
   <div class="scss-var-enclosing">
     {{'.scss-var-enclosing {\n'
-    + '  $my-color: #0000FF; // 局部变量\n'
+    + '  $my-color: #5a4ba4; // 局部变量\n'
     + '  color: $my-color;\n'
     + '}'}}
   </div>
@@ -21,7 +21,8 @@ export default {
 </template>
 
 <style scoped lang="scss">
-$my-color: #00FF00; // 一般变量
+$my-color: #0F0F00; // 一般变量
+$my-color: #126085; // 变量改值
 .scss-var-general {
   color: $my-color;
 
@@ -32,13 +33,12 @@ $my-color: #00FF00; // 一般变量
   height: 140;
 }
 
-$my-color: #00FF00;
 .scss-var-enclosing {
   // 只在 .scss-enclosing 里有效，局部作用域
-  $my-color: #FF0000; // 局部变量
+  $my-color: #5a4ba4; // 局部变量
   color: $my-color;
 
-  font-size: 14;
+  font-size: 13;
   left: 10;
   top: 68;
   width: 220;

package/CssPreprocessor/Scss/components/scss-group2/ScssIteration.vue

@@ -19,7 +19,7 @@ export default {
 </template>
 
 <style scoped lang="scss">
-$size: 4;
+$size: 3;
 @for $num from 1 through 4 {
   $size : $size + $num
 }
@@ -27,7 +27,7 @@ $size: 4;
 .scss-iteration {
   font-size: $size;
 
-  color: #00FF00;
+  color: #126085;
   left: 10;
   top: 3;
   width: 230;

package/CssPreprocessor/Scss/components/scss-group2/ScssMethods.vue

@@ -10,7 +10,7 @@ export default {
     + '  @return 2 * $zoom\n'
     + '}\n'
     + '.scss-method-general {\n'
-    + '  font-size: getsize(7);\n'
+    + '  font-size: getsize(6.5);\n'
     + '}'}}
   </div>
 
@@ -19,7 +19,7 @@ export default {
     + '  @return 2 * $zoom\n'
     + '}\n'
     + '.scss-method-named {\n'
-    + '  font-size: getsize($zoom: 7);\n'
+    + '  font-size: getsize($zoom: 6.5);\n'
     + '}'}}
   </div>
 
@@ -32,7 +32,7 @@ export default {
     + '  @return $size\n'
     + '}\n'
     + '.scss-method-varargs {\n'
-    + '  font-size: getsize(7, 1);\n'
+    + '  font-size: getsize(6, 1);\n'
     + '}'}}
   </div>
 </div>
@@ -43,9 +43,9 @@ export default {
   @return 2 * $zoom
 }
 .scss-method-general {
-  font-size: getsize(7);
+  font-size: getsize(6.5);
 
-  color: #00FF00;
+  color: #126085;
   left: 10;
   top: 10;
   width: 240;
@@ -56,9 +56,9 @@ export default {
   @return 2 * $zoom
 }
 .scss-method-named {
-  font-size: getsize($zoom: 7);
+  font-size: getsize($zoom: 6.5);
 
-  color: #00FF00;
+  color:#126085;
   left: 10;
   top: 140;
   width: 240;
@@ -73,9 +73,9 @@ export default {
   @return $size
 }
 .scss-method-varargs {
-  font-size: getsize(7, 1);
+  font-size: getsize(6, 1);
 
-  color: #00FF00;
+  color: #126085;
   left: 10;
   top: 270;
   width: 240;

package/CssPreprocessor/Scss/components/scss-group3/ScssExtends.vue

@@ -7,7 +7,7 @@ export default {
 <div>
   <div class="scss-extend">
     {{'.scss-basic {\n'
-    + '  color: #00FF00;\n'
+    + '  color: #126085;\n'
     + '}\n'
     + '.scss-extend {\n'
     + '  @extend .scss-basic;\n'
@@ -19,7 +19,7 @@ export default {
 
 <style scoped lang='scss'>
 .scss-basic {
-  color: #00FF00;
+  color: #126085;
 }
 
 .scss-extend {

package/CssPreprocessor/Scss/components/scss-group3/ScssNesting.vue

@@ -7,7 +7,7 @@ export default {
 <div class="scss-root">
   <div class="scss-rule-nesting">
     {{'.scss-root {\n'
-    + '  color: #00FF00;\n'
+    + '  color: #126085;\n'
     + '  .scss-rule-nesting { // 规则嵌套\n'
     + '    font-size: 14;\n'
     + '  }\n'
@@ -26,7 +26,7 @@ export default {
   </div>
   <div class="scss-root-parent-selector">
     {{'.scss-root {\n'
-    + '  color: #00FF00;\n'
+    + '  color: #126085;\n'
     + '  &-parent-selector { // 父选择器\n'
     + '    font-size: 14;\n'
     + '  }\n'
@@ -37,7 +37,7 @@ export default {
 
 <style scoped lang='scss'>
 .scss-root {
-  color: #00FF00;
+  color: #126085;
 
   .scss-rule-nesting { // 规则嵌套
     font-size: 14;

package/CssPreprocessor/Scss/components/scss-group4/ScssKeyframes.vue

@@ -29,7 +29,7 @@ export default {
 }
 
 .scss-keyframes {
-  color: #00FF00;
+  color: #126085;
   font-size: 14;
 
   left: 10;

package/CssPreprocessor/Scss/components/scss-group4/ScssMaps.vue

@@ -26,7 +26,7 @@ $font-sizes: (
   font-size: map-get($font-sizes,
                      medium);
 
-  color: #00FF00;
+  color: #126085;
   left: 10;
   top: 3;
   width: 230;

package/CssPreprocessor/Scss/components/scss-group4/ScssMixins.vue

@@ -24,7 +24,7 @@ export default {
 .scss-mixin {
   @include font(14);
 
-  color: #00FF00;
+  color: #126085;
   left: 10;
   top: 0;
   width: 230;