@shijiu/jsview-vue-samples 2.0.1021 → 2.0.1045-next-vue.0

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,18 @@ let timerId = -1;
 let state = reactive({
   foreColor: "#FF0000",
   backColor: "#00FF00",
+  width:65,
 });
 onMounted(() => {
   timerId = setInterval(() => {
     if (state.foreColor == "#00FF00") {
       state.foreColor = "#FF0000";
       state.backColor = "#00FF00";
+      state.width = 65;
     } else {
       state.foreColor = "#00FF00";
       state.backColor = "#FF0000";
+      state.width = 55;
     }
   }, 3000);
 });
@@ -31,7 +34,7 @@ onBeforeUnmount(() => {
 
   <div
     :style="{
-      left: 70,
+      left: 90,
       width: 65,
       height: 65,
       color: state.foreColor,
@@ -44,7 +47,7 @@ onBeforeUnmount(() => {
 
 <style scoped>
 .block {
-  width: 65;
+  width: v-bind(state.width + 10);
   height: 65;
   /* word-wrap: break-word; */
   color: v-bind(state.foreColor);

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;

package/CssPreprocessor/Scss/components/scss-group5/ScssImporting.vue

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

package/CssPreprocessor/Scss/components/scss-group5/TextSettings.scss

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

package/CssPreprocessor/Stylus/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/Stylus/components/stylus-group1/StylusComments.vue

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

package/CssPreprocessor/Stylus/components/stylus-group1/StylusConditionals.vue

@@ -11,7 +11,7 @@ export default {
     + '  if $show-green {\n'
     + '    color #00FF00\n'
     + '  } else {\n'
-    + '    color #FF0000\n'
+    + '    color #126085\n'
     + '  }\n'
     + '}'}}
   </div>
@@ -24,7 +24,7 @@ $show-green = false
   if $show-green {
     color: #00FF00;
   } else {
-    color: #FF0000;
+    color: #126085;
   }
 
   font-size: 14;