@shijiu/jsview-vue-samples 1.9.887 → 1.9.915

package/CssPreprocessor/Scss/App.vue

@@ -0,0 +1,32 @@
+<script>
+import { panelData } from './PanelData';
+import Panel from '../utils/Panel.vue';
+
+export default {
+  components: {
+    Panel
+  },
+  setup() {
+    return {
+      panelData,
+    };
+  },
+}
+</script>
+
+<template>
+<div>
+  <div class="root">
+      <Panel :style="{top:10, left:10, width:1230, height:640}"
+        :panelData=panelData :sideline=true />
+  </div>
+</div>
+</template>
+
+<style scoped>
+.root {
+  top: 10; left: 10;
+  width: 1250; height: 670;
+  background-color: rgba(200, 200, 200, 1)
+}
+</style>

package/CssPreprocessor/Scss/PanelData.js

@@ -0,0 +1,51 @@
+import ScssComments from './components/scss-group1/ScssComments.vue';
+import ScssOperations from './components/scss-group1/ScssOperations.vue';
+import ScssVariables from './components/scss-group1/ScssVariables.vue';
+import ScssConditionals from './components/scss-group1/ScssConditionals.vue';
+import ScssIteration from './components/scss-group2/ScssIteration.vue';
+import ScssMethods from './components/scss-group2/ScssMethods.vue';
+import ScssExtends from './components/scss-group3/ScssExtends.vue';
+import ScssNesting from './components/scss-group3/ScssNesting.vue';
+import ScssMixins from './components/scss-group4/ScssMixins.vue';
+import ScssMaps from './components/scss-group4/ScssMaps.vue';
+import ScssKeyframes from './components/scss-group4/ScssKeyframes.vue';
+import ScssImporting from './components/scss-group5/ScssImporting.vue';
+
+const titleData = [
+  'Scss 注释、运算符、变量、条件',
+  'Scss 迭代、方法',
+  'Scss 继承、嵌套',
+  'Scss 混入、映射、关键帧',
+  'Scss 导入',
+];
+
+const contentListData = [
+  [
+    { title: "注释- //, /**/", obj: ScssComments },
+    { title: "运算符- [ +,-,*,/,... ]", obj: ScssOperations },
+    { title: "变量- $var, .a{$var}", obj: ScssVariables, zoom: 1 },
+    { title: "条件- @if{}, @else if{}, @else{}", obj: ScssConditionals },
+  ],
+  [
+    { title: "迭代- @for, @each", obj: ScssIteration },
+    { title: "方法- @function name(var)", obj: ScssMethods, zoom: 3 },
+  ],
+  [
+    { title: "继承- @extend", obj: ScssExtends },
+    { title: "嵌套- .a{.b{}}, font:{}, text:{}", obj: ScssNesting, zoom: 3 },
+  ],
+  [
+    { title: "混入- @mixin name(var), @include", obj: ScssMixins},
+    { title: "映射- $name:{key:value}, map-get()", obj: ScssMaps},
+    { title: "关键帧- @keyframes", obj: ScssKeyframes},
+  ],
+  [
+    { title: "导入- @import", obj: ScssImporting, zoom: 2 },
+    { title: undefined, obj: undefined, zoom: 0 },
+  ],
+];
+
+export const panelData = {
+  title: titleData,
+  contentList: contentListData
+}

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

@@ -0,0 +1,34 @@
+<script>
+export default {
+}
+</script>
+
+<template>
+<div>
+  <div class="scss-comments">
+    {{'// scss 单行注释\n'
+    + '/* scss 多行注释 */\n'
+    + '.scss-comments {\n'
+    + '  // scss 单行注释\n'
+    + '  /* scss 多行注释 */\n'
+    + '  color: #00FF00;\n'
+    + '}'}}
+  </div>
+</div>
+</template>
+
+<style scoped lang="scss">
+// scss 单行注释
+/* scss 多行注释 */
+.scss-comments {
+  // scss 单行注释
+  /* scss 多行注释 */
+  color: #00FF00;
+  font-size: 14;
+
+  left: 10;
+  top: 3;
+  width: 230;
+  height: 130;
+}
+</style>

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

@@ -0,0 +1,36 @@
+<script>
+export default {
+}
+</script>
+
+<template>
+<div>
+  <div class="scss-conditional">
+    {{'$show-green: false;\n'
+    + '.scss-conditional {\n'
+    + '  @if $show-green {\n'
+    + '    color: #00FF00;\n'
+    + '  } @else {\n'
+    + '    color: #FF0000;\n'
+    + '  }\n'
+    + '}\n'}}
+  </div>
+</div>
+</template>
+
+<style scoped lang="scss">
+$show-green: false;
+.scss-conditional {
+  @if $show-green {
+    color: #00FF00;
+  } @else {
+    color: #FF0000;
+  }
+
+  font-size: 14;
+  left: 10;
+  top: 0;
+  width: 220;
+  height: 140;
+}
+</style>

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

@@ -0,0 +1,30 @@
+<script>
+export default {
+}
+</script>
+
+<template>
+<div>
+  <div class="scss-op">
+    {{'not, +, -, /\n'
+    + '*, /, %\n'
+    + '+, -\n'
+    + '>, >=, <, <=\n'
+    + '==, !=\n'
+    + 'and, or\n'
+    + '=\n'}}
+  </div>
+</div>
+</template>
+
+<style scoped lang="scss">
+.scss-op {
+  color: #00FF00;
+  font-size: 20 - 6;
+
+  left: 10;
+  top: 3;
+  width: 230;
+  height: 280;
+}
+</style>

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

@@ -0,0 +1,48 @@
+<script>
+export default {
+}
+</script>
+
+<template>
+<div>
+  <div class="scss-var-general">
+    {{'$my-color: #00FF00; // 一般变量\n'
+    + '.scss-var-general {\n'
+    + '  color: $my-color;\n'
+    + '}'}}
+  </div>
+  <div class="scss-var-enclosing">
+    {{'.scss-var-enclosing {\n'
+    + '  $my-color: #0000FF; // 局部变量\n'
+    + '  color: $my-color;\n'
+    + '}'}}
+  </div>
+</div>
+</template>
+
+<style scoped lang="scss">
+$my-color: #00FF00; // 一般变量
+.scss-var-general {
+  color: $my-color;
+
+  font-size: 14;
+  left: 10;
+  top: 0;
+  width: 220;
+  height: 140;
+}
+
+$my-color: #00FF00;
+.scss-var-enclosing {
+  // 只在 .scss-enclosing 里有效，局部作用域
+  $my-color: #FF0000; // 局部变量
+  color: $my-color;
+
+  font-size: 14;
+  left: 10;
+  top: 68;
+  width: 220;
+  height: 140;
+}
+
+</style>

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

@@ -0,0 +1,36 @@
+<script>
+export default {
+}
+</script>
+
+<template>
+<div>
+  <div class="scss-iteration">
+    {{'$size: 4;\n'
+    + '@for $num from 1 through 4 {\n'
+    + '  $size : $size + $num\n'
+    + '}\n'
+    + '\n'
+    + '.scss-iteration {\n'
+    + '  font-size: $size;\n'
+    + '}'}}
+  </div>
+</div>
+</template>
+
+<style scoped lang="scss">
+$size: 4;
+@for $num from 1 through 4 {
+  $size : $size + $num
+}
+
+.scss-iteration {
+  font-size: $size;
+
+  color: #00FF00;
+  left: 10;
+  top: 3;
+  width: 230;
+  height: 140;
+}
+</style>

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

@@ -0,0 +1,84 @@
+<script>
+export default {
+}
+</script>
+
+<template>
+<div>
+  <div class="scss-method-general">
+    {{'@function getsize($zoom) { //一般调用\n'
+    + '  @return 2 * $zoom\n'
+    + '}\n'
+    + '.scss-method-general {\n'
+    + '  font-size: getsize(7);\n'
+    + '}'}}
+  </div>
+
+  <div class="scss-method-named">
+    {{'@function getsize($zoom) { //具名参数\n'
+    + '  @return 2 * $zoom\n'
+    + '}\n'
+    + '.scss-method-named {\n'
+    + '  font-size: getsize($zoom: 7);\n'
+    + '}'}}
+  </div>
+
+  <div class="scss-method-varargs">
+    {{'@function getsize($args...) { //不定参数\n'
+    + '  $size: 2;\n'
+    + '  @each $zoom in $args {\n'
+    + '    $size: $size * $zoom;\n'
+    + '  }\n'
+    + '  @return $size\n'
+    + '}\n'
+    + '.scss-method-varargs {\n'
+    + '  font-size: getsize(7, 1);\n'
+    + '}'}}
+  </div>
+</div>
+</template>
+
+<style scoped lang="scss">
+@function getsize($zoom) { //一般调用
+  @return 2 * $zoom
+}
+.scss-method-general {
+  font-size: getsize(7);
+
+  color: #00FF00;
+  left: 10;
+  top: 10;
+  width: 240;
+  height: 140;
+}
+
+@function getsize($zoom) { //具名参数
+  @return 2 * $zoom
+}
+.scss-method-named {
+  font-size: getsize($zoom: 7);
+
+  color: #00FF00;
+  left: 10;
+  top: 140;
+  width: 240;
+  height: 140;
+}
+
+@function getsize($args...) { //不定参数
+  $size: 2;
+  @each $zoom in $args {
+    $size: $size * $zoom;
+  }
+  @return $size
+}
+.scss-method-varargs {
+  font-size: getsize(7, 1);
+
+  color: #00FF00;
+  left: 10;
+  top: 270;
+  width: 240;
+  height: 180;
+}
+</style>

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

@@ -0,0 +1,34 @@
+<script>
+export default {
+}
+</script>
+
+<template>
+<div>
+  <div class="scss-extend">
+    {{'.scss-basic {\n'
+    + '  color: #00FF00;\n'
+    + '}\n'
+    + '.scss-extend {\n'
+    + '  @extend .scss-basic;\n'
+    + '  font-size: 14;\n'
+    + '}'}}
+  </div>
+</div>
+</template>
+
+<style scoped lang='scss'>
+.scss-basic {
+  color: #00FF00;
+}
+
+.scss-extend {
+  @extend .scss-basic;
+  font-size: 14;
+  
+  left: 10;
+  top: 3;
+  width: 230;
+  height: 140;
+}
+</style>

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

@@ -0,0 +1,75 @@
+<script>
+export default {
+}
+</script>
+
+<template>
+<div class="scss-root">
+  <div class="scss-rule-nesting">
+    {{'.scss-root {\n'
+    + '  color: #00FF00;\n'
+    + '  .scss-rule-nesting { // 规则嵌套\n'
+    + '    font-size: 14;\n'
+    + '  }\n'
+    + '}'}}
+  </div>
+  <div class="scss-prop-nesting">
+    {{'.scss-prop-nesting { // 属性嵌套\n'
+    + '  font: {\n'
+    + '    size: 14;\n'
+    + '    weight: bold;\n'
+    + '  }\n'
+    + '  text: {\n'
+    + '    align: left;\n'
+    + '  }\n'
+    + '}'}}
+  </div>
+  <div class="scss-root-parent-selector">
+    {{'.scss-root {\n'
+    + '  color: #00FF00;\n'
+    + '  &-parent-selector { // 父选择器\n'
+    + '    font-size: 14;\n'
+    + '  }\n'
+    + '}'}}
+  </div>
+</div>
+</template>
+
+<style scoped lang='scss'>
+.scss-root {
+  color: #00FF00;
+
+  .scss-rule-nesting { // 规则嵌套
+    font-size: 14;
+
+    left: 10;
+    top: 3;
+    width: 230;
+    height: 140;
+  }
+
+  .scss-prop-nesting { // 属性嵌套
+    font: {
+      size: 14;
+      weight: bold;
+    }
+    text: {
+      align: left;
+    }
+
+    left: 10;
+    top: 120;
+    width: 230;
+    height: 140;
+  }
+
+  &-parent-selector { // 父选择器
+    font-size: 14;
+
+    left: 10;
+    top: 280;
+    width: 230;
+    height: 140;
+  }
+}
+</style>

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

@@ -0,0 +1,40 @@
+<script>
+export default {
+}
+</script>
+
+<template>
+<div>
+  <div class="scss-keyframes" :style="{ animation: 'scale-anim 3s infinite linear' }">
+    {{'@keyframes scale-anim {\n'
+    + '  from {\n'
+    + '    transform scale3d(1.0, 1.0, 1)\n'
+    + '  }\n'
+    + '  to {\n'
+    + '    transform scale3d(0.8, 0.8, 1)\n'
+    + '  }\n'
+    + '}'}}
+  </div>
+</div>
+</template>
+
+<style scoped lang="scss">
+@keyframes scale-anim {
+  from {
+    transform: scale3d(1.0, 1.0, 1);
+  }
+  to {
+    transform: scale3d(0.8, 0.8, 1);
+  }
+}
+
+.scss-keyframes {
+  color: #00FF00;
+  font-size: 14;
+
+  left: 10;
+  top: 0;
+  width: 230;
+  height: 140;
+}
+</style>

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

@@ -0,0 +1,35 @@
+<script>
+export default {
+}
+</script>
+
+<template>
+<div>
+  <div class="scss-map">
+    {{'$font-sizes: (\n'
+    + '  small: 10, medium: 14, large: 18,\n'
+    + ');\n'
+    + '.scss-map {\n'
+    + '  font-size: map-get($font-sizes,\n'
+    + '                     medium);\n'
+    + '}'}}
+  </div>
+</div>
+</template>
+
+<style scoped lang='scss'>
+$font-sizes: (
+  small: 10, medium: 14, large: 18,
+);
+
+.scss-map {
+  font-size: map-get($font-sizes,
+                     medium);
+
+  color: #00FF00;
+  left: 10;
+  top: 3;
+  width: 230;
+  height: 140;
+}
+</style>

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

@@ -0,0 +1,33 @@
+<script>
+export default {
+}
+</script>
+
+<template>
+<div>
+  <div class="scss-mixin">
+    {{'@mixin font($size) {\n'
+    + '  font-size: $size;\n'
+    + '}\n'
+    + '.scss-mixin {\n'
+    + '  @include font(14);\n'
+    + '}'}}
+  </div>
+</div>
+</template>
+
+<style scoped lang='scss'>
+@mixin font($size) {
+  font-size: $size;
+}
+
+.scss-mixin {
+  @include font(14);
+
+  color: #00FF00;
+  left: 10;
+  top: 0;
+  width: 230;
+  height: 140;
+}
+</style>

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

@@ -0,0 +1,34 @@
+<script>
+export default {
+}
+</script>
+
+<template>
+<div>
+  <div class="scss-bounds scss-imported">
+    {{'ScssImportFile.vue\n'
+    + '\n'
+    + '<style scoped lang=\'scss\'>\n'
+    + '@import \'./TextSettings\';\n'
+    + '</style>\n'
+    + '\n'
+    + '=================\n'
+    + 'TextSettings.scss\n'
+    + '\n'
+    + '.scss-imported {\n'
+    + '  color: #00FF00;\n'
+    + '  font-size: 14;\n'
+    + '}'}}
+  </div>
+</div>
+</template>
+
+<style scoped lang='scss'>
+@import './TextSettings';
+.scss-bounds {
+  left: 10;
+  top: 0;
+  width: 230;
+  height: 280;
+}
+</style>

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

@@ -0,0 +1,4 @@
+.scss-imported {
+  color: #00FF00;
+  font-size: 14;
+}

package/CssPreprocessor/Stylus/App.vue

@@ -0,0 +1,32 @@
+<script>
+import { panelData } from './PanelData';
+import Panel from '../utils/Panel.vue';
+
+export default {
+  components: {
+    Panel
+  },
+  setup() {
+    return {
+      panelData,
+    };
+  },
+}
+</script>
+
+<template>
+<div>
+  <div class="root">
+      <Panel :style="{top:10, left:10, width:1230, height:640}"
+        :panelData=panelData :sideline=true />
+  </div>
+</div>
+</template>
+
+<style scoped>
+.root {
+  top: 10; left: 10;
+  width: 1250; height: 670;
+  background-color: rgba(200, 200, 200, 1)
+}
+</style>