Shulou(Shulou.com)05/31 Report--

In this article Xiaobian for you to introduce in detail "how to use svg to encapsulate global message prompt components in vue", the content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to use svg to encapsulate global message prompt components in vue" can help you solve your doubts.

Take a look at the effect picture first.

First, install and download the svg-related dependencies you need.

Npm install svg-sprite-loader-save-dev

2. For vue projects without vue.config.js files, make the following two configurations directly in webpack.base.conf.js

1. Find the relevant configuration location of the picture, and add the code selected by the paragraph.

two。 Add the following code after the picture is configured

3. According to the added code, we create an icons folder under src and a svg folder under icons to store the pictures at the end of svg.

Add code to the index.js folder

Import Vue from 'vue'import SvgIcon from'.. / components/SvgIcon/SvgIcon'Vue.component ('svg-icon', SvgIcon) const req = require.context ('. / svg', false, /\ .svg $/) const requireAll = requireContext = > requireContext.keys () .map (requireContext) requireAll (req)

Add a SvgIcon folder to components and create a component svgIcon.vue, adding the following code

Export default {name: "icon-svg", props: {iconClass: {type: String, required: true}, className: {type: String, default: ""}} Computed: {iconName () {return `# icon-$ {this.iconClass}` }, svgClass () {if (this.className) {return "svg-icon" + this.className;} else {return "svg-icon";}}; .svg-icon {width: 30px; height: 30px Vertical-align:-0.15em. fill: currentColor; overflow: hidden;}

5. Introduce the icons folder created under src in main.js

6. At this point, use svg in vue, and then use it directly in the project.

After completing the configuration of svg, try the global message prompt next.

First, create a Message folder under components, and create two files under the folder, one message.vue and one index.js

Add the following code under message.vue

{{text}} export default {name: 'message', props: {type: {type: String, default:' success',}, text: {type: String, default:'',} IsShow: {type: Boolean, default: true,} .message _ wrap {position: fixed; min-width: 400px; height: 64px; top: 6%; left: 50%; transform: translateX (- 50%); display: flex; justify-content: flex-start; align-items: center; .message {font-size: 18px; line-height: 64px Text-align: center; margin-left: 16px;} .message _ success {color: # 4caf50;} .message _ fail {color: # ff5252;}} .wrap _ success {background: rgba (234, .5);} .wrap _ fail {background: rgba (255, 235, 235) } .fade-enter-active, .fade-leave-active {transition: opacity .5s} .fade-enter, .fade-leave-active {opacity: 0}

Add the following code to index.js

Import vue from 'vue'import Message from'. / message'const messageConstructor = vue.extend (Message) const MsgMain = {show (text, type) Duration) {const instance = new messageConstructor () / / create instance instance.$mount (document.createElement ('div')) / / create dom element document.body.appendChild (instance.$el) / / add dom element to body instance.type = type / / write attribute instance.text = text / / write attribute instance.isShow = true / / write the attribute setTimeout (() = > {instance.isShow = false / / close the prompt after a period of time} Duration)}, success (text, duration = 2000) {this.show (text, 'success', duration) / / call on success}, error (text, duration = 2000) {this.show (text,' error', duration) / / call on failure},} / / globally register function Msg () {vue.prototype.$message = MsgMain} export default Msg

Second, introduce it into main.js

Third, use: finally, call it where you need it.

After reading this, the article "how to use svg to encapsulate global message prompt components in vue" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it yourself to understand it. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.