Skip to content

Latest commit

 

History

History
370 lines (303 loc) · 6.57 KB

NOTE.md

File metadata and controls

370 lines (303 loc) · 6.57 KB
Raw

修改主题颜色(修改 scss 变量颜色)


index.scss

$themeColor: 'red'

:export {
  theme: $themeColor;
}

index.js

import color from "index.scss";

let themeColor = color.theme;

export { themeColor };

不刷新浏览器刷新路由（replace）


  1. 新建路由 replace.vue

router.js

...
{
    path: '/redirect',
    name: 'redirect',
    hidden: true,
    component: () => import('/@/views/redirect.vue')
}
...

redirect.vue

<script>
import { useRoute, useRouter } from 'vue-router'
export default {
  setup(){
    let router = useRouter()
    let route = useRoute()
    const { params, query } = route

    console.log(route);
    router.replace({
        name: params.__name,
        params,query
    })
  }
}
</script>
  1. 在需要方法里面写入
router.replace({
  name: "redirect",
  params: {
    ...params,
    __name: name,
  },
  query,
});

element-plus $message 的使用

  1. 在每个页面引入
// 引入
import { ElMessage } from "element-plus";

// 使用
ElMessage.success("ok");
  1. provide/inject
// main.ts
import { ElMessage } from "element-plus";

const app = createApp(App);
app.provide("$message", ElMessage);

// index.vue
(inject('$message') as any).success("inject");

element-plus $msgbox, $alert, $confirm 和 $prompt 的使用

  1. 在每个页面引入
// 引入
import { ElMessageBox  } from "element-plus";

// 使用
ElMessageBox.confirm(...);

对应于上述四个全局方法的调用方法依次为：ElMessageBox, ElMessageBox.alert, ElMessageBox.confirm 和 ElMessageBox.prompt调用参数与全局方法相同。

  1. provide/inject
// main.ts
import { ElMessageBox } from "element-plus";

const app = createApp(App);
app.provide("messageBox", ElMessageBox);

// index.vue
(inject('messageBox') as any).confirm(...);

jsx 类名样式不生效

import {
  h,
  withScopeId,
  getCurrentInstance,
} from "vue";

const instance = getCurrentInstance();
const withId = withScopeId((instance as any).type.__scopeId);

return withId(() =>
  h("div")
);

Vite 主题颜色修改

// 定义变量
$--el-color-primary: #409eff !default;

div{
  color: var(--el-color-primary)!important;
}
// 挂载到 root 上
:root{
   color: #{$--el-color-primary};
}

Js 修改样式

document.documentElement.style.setProperty('--el-color-primary', 'red')

Vite 使用TSX

  1. 安装
yarn add @vitejs/plugin-vue-jsx

// or

npm install @vitejs/plugin-vue-jsx -D
  1. 配置

在 vite.config.ts 文件中挂载

import vueJsx from '@vitejs/plugin-vue-jsx'
export default defineConfig({
 plugins: [ vueJsx()]
})

tsconfig.json 文件中

{
  // include 需要包含tsx
"include": ["src/*", "src/**/*.vue", "src/**/*.tsx", "src/**/*.jsx", "src/**/*.ts", "src/**/*.js"],
 "compilerOptions": {
    // 在.tsx文件里支持JSX
    "jsx": "preserve",
 }
}
  1. 使用 (1) 新建**.tsx
// index.tsx
export default definedComponents({
  setup(props){
    return ()=>(
      <div>
      Hello,World
      </div>
    )
  }
})

(2) 新建**.vue

不需要template。script上加lang='tsx'

// index.vue
<script lang='tsx'>
import {definedComponents} from 'vue'
export default definedComponents({
  setup(props){
    return ()=>(
      <div>
      Hello,World
      </div>
    )
  }
})
</script>

  1. 文档 jsx语法Seehttps://github.com/vuejs/jsx-next#babel-plugin-jsx-for-vue-30

  2. 探坑

  3. jsx/tsx中循环出来的标签元素上有点击事件的话 会自动调用事件

// 例如
export default definedComponents({
  import {definedComponents} from 'vue'
  setup(props){
    // 会被调用3次
    const click = (val)=>{
      consloe.log(val)
      // 112
      // 112
      // 112
    }
    return ()=>(
      <>
      {[1,2,3].map((item,index)=>{
        return (
          // 而且 这样写拿不到原生事件 event
          <div onClick={click('112')}><>
        )
      })}
      </>
    )
  }
})

正确应该是 onClick={(e)=>{click(e,'112')}} 这样也可以拿到原生事件

// jsx/tsx中循环出来的标签元素上有点击事件的话 会自动调用事件
// 例如
export default definedComponents({
  setup(props){
    // 只有点击时执行
    const click = (e,val)=>{
      consloe.log(e,val)
    }
    return ()=>(
      <>
      {[1,2,3].map((item,index)=>{
        return (
          <div onClick={(e)=>{click(e,'112')}}><>
        )
      })}
      </>
    )
  }
})
  1. jsx中 使用 transition
import {Transition,ref,definedComponents} from 'vue'
export default definedComponents({
  setup(props){
    // 只有点击时执行
    const a = ref(false)
    return ()=>(
      <>
        <Transition>
        <div v-show={a}></div>
      </Transition>
      </>
    )
  }
})
  1. jsx中 使用 阻止冒泡
export default definedComponents({
  setup(props){

    // 只有点击时执行
    const a = ()=>{

    }
    return ()=>(
      <>
        <div onClick={(e: any) => {
            e.stopPropagation(a());
          }}></div>
      </>
    )
  }
})

Vite 使用svg-icon

文档

// node_modules/mockjs/dist/mock.js 
function handle(event) {
    // 同步属性 NativeXMLHttpRequest => MockXMLHttpRequest
    for (var i = 0; i < XHR_RESPONSE_PROPERTIES.length; i++) {
        try {
            that[XHR_RESPONSE_PROPERTIES[i]] = xhr[XHR_RESPONSE_PROPERTIES[i]]
        } catch (e) {}
    }
    // 触发 MockXMLHttpRequest 上的同名事件
    that.dispatchEvent(new Event(event.type /*, false, false, that*/ ))
}

MockXMLHttpRequest.prototype.upload = createNativeXMLHttpRequest().upload // 8307 添加此行

// 如果未找到匹配的数据模板，则采用原生 XHR 发送请求。
...
// node_modules/mockjs/dist/mock.js 
// 原生 XHR
if (!this.match) {
    // 8364行添加
    this.custom.xhr.responseType = this.responseType
    this.custom.xhr.send(data)
    return
}