2022年11月2日 星期三

CSS心得2022

Stylus

https://stackoverflow.com/a/66284049  "ERESOLVE unable to resolve dependency tree" when installing npm react-facebook-login
https://stackoverflow.com/a/65348395  Unable to resolve dependency tree error when installing npm packages


安裝

如果在 Vue心得2022  時沒有安裝Stylus，可以這樣安裝

$ npm install stylus stylus-loader --save-dev
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @vue/eslint-config-standard@6.1.0
npm ERR! Found: eslint-plugin-vue@8.7.1
npm ERR! node_modules/eslint-plugin-vue
npm ERR!   dev eslint-plugin-vue@"^8.0.3" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer eslint-plugin-vue@"^7.0.0" from @vue/eslint-config-standard@6.1.0
npm ERR! node_modules/@vue/eslint-config-standard
npm ERR!   dev @vue/eslint-config-standard@"^6.1.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: eslint-plugin-vue@7.20.0
npm ERR! node_modules/eslint-plugin-vue
npm ERR!   peer eslint-plugin-vue@"^7.0.0" from @vue/eslint-config-standard@6.1.0
npm ERR!   node_modules/@vue/eslint-config-standard
npm ERR!     dev @vue/eslint-config-standard@"^6.1.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

這時候要加 --legacy-peer-deps（用nvm升級npm到 8.19.2 無效）

$ npm install stylus stylus-loader --save-dev --legacy-peer-deps
added 5 packages, changed 1 package, and audited 992 packages in 4s

126 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

npm audit

如果npm install --save 遇到類似錯誤（npm ERR! code ERESOLVE）也可以這樣處理
$ npm install --save --legacy-peer-deps
added 986 packages, and audited 987 packages in 47s

124 packages are looking for funding
  run `npm fund` for details

1 high severity vulnerability

To address all issues, run:
  npm audit fix

Run `npm audit` for details.

處理完發現有vulnerability，按照提示處理

$ npm audit
# npm audit report

terser  5.0.0 - 5.14.1
Severity: high
Terser insecure use of regular expressions before v4.8.1 and v5.14.2 leads to ReDoS - https://github.com/advisories/GHSA-4wf5-vphf-c2xc
fix available via `npm audit fix`
node_modules/terser

1 high severity vulnerability

To address all issues, run:
  npm audit fix

$ npm audit fix --legacy-peer-deps
changed 1 package, and audited 987 packages in 4s

124 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

npm audit fix 時也會遇到 code ERESOLVE 錯誤，一樣加 --legacy-peer-deps 處理

使用

diff --git a/src/views/TestView.vue b/src/views/TestView.vue
index 47f0bc6..b2504c3 100644
--- a/src/views/TestView.vue
+++ b/src/views/TestView.vue
@@ -63,6 +63,14 @@
         <div class="two"></div>
       </article>
     </section>
+    <div id="container">
+      <div id="header">Header contents</div>
+    </div>
+    <div id="wrapper-1">
+      <div id="container">
+        <div id="header">Header contents</div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -152,7 +160,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="stylus">
 #outer {
   background: aqua;
   text-align: left;
@@ -278,4 +286,15 @@ article {
   height: 30px;
 }
 
+#container {
+  #header {
+    background: salmon
+  }
+}
+
+#wrapper-1
+  #container
+    #header
+      background: burlywood
+
 </style>
s

在 <style> 加 lang="stylus"，括號可有可無，加了才能在WebStorm - Move Caret to Matching Brace （Ctrl + M）。Stylus的擴展名是.styl


讓float的div和父div一樣高

https://stackoverflow.com/a/31528903  How to make a floated div 100% height of its parent?
子div：不要讓他float ，加 display: table-cell; 
父元素：加 display: table; 

#outer{
    display: table;
}
#inner {
    display: table-cell;
    float: none;
}
s

position: absolute 的父div高度

https://stackoverflow.com/a/13546011  Position: absolute and parent height?
https://stackoverflow.com/a/12071017  Make absolute positioned div expand parent div height

問題

position: absolute 的父div高度沒有height

diff --git a/src/views/TestView.vue b/src/views/TestView.vue
index b1c9159..f7d07e1 100644
--- a/src/views/TestView.vue
+++ b/src/views/TestView.vue
@@ -35,12 +35,34 @@
+    <section id="foo">
+      <header>Foo</header>
+      <article>
+        <div class="one"></div>
+        <div class="two"></div>
+      </article>
+    </section>
   </div>
 </template>
 
@@ -154,4 +176,106 @@ export default {
 .clear {
   clear: both;
 }
+article {
+  background: #0f0;
+  /*question*/
+  position: relative;
+}
+
+.one {
+  /*question*/
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  background: red;
+  width: 30px;
+  height: 30px;
+}
+
+.two {
+  /*question*/
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background: blue;
+  width: 30px;
+  height: 30px;
+}
+
 </style>
s

10年前的解法（original）

diff --git a/src/views/TestView.vue b/src/views/TestView.vue
index b1c9159..f7d07e1 100644
--- a/src/views/TestView.vue
+++ b/src/views/TestView.vue
@@ -35,12 +35,34 @@
+    <section id="foo">
+      <header>Foo</header>
+      <article>
+        <div class="one"></div>
+        <div class="two"></div>
+      </article>
+    </section>
   </div>
 </template>
 
@@ -154,4 +176,106 @@ export default {
 .clear {
   clear: both;
 }
+article {
+  background: #0f0;
+  /*original*/
+  position: relative;
+  overflow: hidden;
+}
+
+.one {
+  /*original*/
+  position: relative;
+  float: left;
+  margin-top: 10px;
+  margin-left: 10px;
+  background: red;
+  width: 30px;
+  height: 30px;
+}
+
+.two {
+  /*original*/
+  position: relative;
+  float: right;
+  margin-top: 10px;
+  margin-right: 10px;
+  background: blue;
+  width: 30px;
+  height: 30px;
+}
+
 </style>
s

grid


因為10年前瀏覽器CSS佈局沒有grid和flex，我們現在可以用grid和flex
diff --git a/src/views/TestView.vue b/src/views/TestView.vue
index b1c9159..f7d07e1 100644
--- a/src/views/TestView.vue
+++ b/src/views/TestView.vue
@@ -35,12 +35,34 @@
+    <section id="foo">
+      <header>Foo</header>
+      <article>
+        <div class="one"></div>
+        <div class="two"></div>
+      </article>
+    </section>
   </div>
 </template>
 
@@ -154,4 +176,106 @@ export default {
 .clear {
   clear: both;
 }
+article {
+  background: #0f0;
+  /*grid*/
+  display: grid;
+  grid-template-columns: 30px auto 30px;
+  padding: 10px 10px 0;
+}
+
+.one {
+  /*grid*/
+  height: 30px;
+  background: red;
+  grid-column: 1/2;
+}
+
+.two {
+  /*grid*/
+  height: 30px;
+  background: blue;
+  grid-column: 3/4;
+}
+
 </style>
s


display: grid;  讓容器變成grid
grid-template-columns: 30px auto 30px;  行佈局3個grid，第一個寬度30px，第二個自動填充剩餘寬度，第三個寬度30px。必須在這設定grid寬度，在子div的item設置無效
padding: 10px 10px 0;  因為gap不含外圍，所以在容器上設padding
grid-column: 1/2; 設定.one從第1個位置開始到第2個位置結束
grid-column: 3/4; 設定.two從第3個位置開始到第4個位置結束（跳過2/3）


flex（推薦）

https://stackoverflow.com/a/35578723  Giving wrapped flexbox items vertical spacing
https://stackoverflow.com/a/31006659  Align an element to bottom with flexbox
https://stackoverflow.com/a/41440249  Flexbox Two Rows Two Columns
https://stackoverflow.com/a/19027949  Flexbox: center horizontally and vertically
https://stackoverflow.com/a/33049392  How to vertically align text inside a flexbox?


diff --git a/src/views/TestView.vue b/src/views/TestView.vue
index b1c9159..f7d07e1 100644
--- a/src/views/TestView.vue
+++ b/src/views/TestView.vue
@@ -35,12 +35,34 @@
+    <section id="foo">
+      <header>Foo</header>
+      <article>
+        <div class="one"></div>
+        <div class="two"></div>
+      </article>
+    </section>
   </div>
 </template>
 
@@ -154,4 +176,106 @@ export default {
 .clear {
   clear: both;
 }
+article {
+  background: #0f0;
+  /*flex*/
+  display: flex;
+  justify-content: space-between;
+}
+
+.one {
+  /*flex*/
+  margin-top: 10px;
+  margin-left: 10px;
+  background: red;
+  width: 30px;
+  height: 30px;
+}
+
+.two {
+  /*flex*/
+  margin-top: 10px;
+  margin-right: 10px;
+  background: blue;
+  width: 30px;
+  height: 30px;
+}
+
 </style>
s



display: flex;  讓容器變成flex
justify-content: space-between;  可以直接點chrome的Open flexbox editor去調








張貼者： 於 沒有留言:
標籤： ,

Vue心得2022-2

前言

繼 Vue心得2022 ，因為文章太長不好找內容，所以拆出來 

mixins

https://juejin.cn/post/7076340796361801759  彻底搞懂Vue中的Mixin混入（保姆级教程）


diff --git a/src/mixin/index.js b/src/mixin/index.js
new file mode 100644
index 0000000..80b67fc
--- /dev/null
+++ b/src/mixin/index.js
@@ -0,0 +1,23 @@
+export const mixins = {
+  data () {
+    return {
+      msg: '我是小猪课堂'
+    }
+  },
+  computed: {},
+  created () {
+    console.log('我是mixin中的created生命周期函数')
+  },
+  mounted () {
+    console.log('我是mixin中的mounted生命周期函数')
+  },
+  methods: {
+    clickMe () {
+      console.log('我是mixin中的点击事件')
+      this.clickMe2()
+    },
+    clickMe2 () {
+      console.log('我是mixin中的clickMe2')
+    }
+  }
+}
diff --git a/src/views/TestView.vue b/src/views/TestView.vue
index 6664fb9..e690975 100644
--- a/src/views/TestView.vue
+++ b/src/views/TestView.vue
@@ -63,14 +63,15 @@
+    <button @click="clickMe">点击我</button>
   </div>
 </template>
 
@@ -80,6 +81,7 @@ import store from '@/store'
 import { mapGetters } from 'vuex'
 import _ from 'lodash'
 import ModalComponent from '@/components/ModalComponent'
+import { mixins } from '@/mixin'
 
 export default {
   name: 'TestView',
@@ -87,6 +89,7 @@ export default {
     ChildComponent,
     ModalComponent
   },
+  mixins: [mixins],
   data () {
     return {
       singleObj: {
@@ -119,12 +122,19 @@ export default {
   },
+  created () {
+    console.log('我是组件的created调用mixin数据', this.msg)
+  },
+  mounted () {
+    console.log('我是组件的mounted生命周期函数')
   },
   methods: {
+    clickMe2 () {
+      console.log('我是组件的clickMe2')
+    },
     callMe (count) {
       console.log(count)
       this.parentCount = count
s

結果

我是mixin中的created生命周期函数  - 先呼叫mixin的created
我是组件的created调用mixin数据 我是小猪课堂
我是mixin中的mounted生命周期函数  - 先呼叫mounted的created
我是组件的mounted生命周期函数
我是mixin中的点击事件
我是组件的clickMe2  - 值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。







張貼者： 於 沒有留言:
標籤：
訂閱： 文章 (Atom)