search

varletjs / varlet

A Vue3 component library based on Material Design 2 and 3, supporting mobile and desktop.
https://varlet.pages.dev
MIT License
4.81k stars 602 forks source link

var-button 点击边框出现红线 #1628

Closed scallopsF closed 1 month ago

scallopsF commented 1 month ago

About styles 🛠️

image image image

点击任何一个按钮后，都会出现一个红色边框，我这是刚建的vue3框架，使用的var-button。代码如下

<template>
  <div>
    <var-button type="primary">主要按钮</var-button>
    <var-button text outline type="primary">外边框按钮</var-button>
    <var-button text type="primary">纯文字按钮</var-button>
  </div>
</template>
scallopsF commented 1 month ago 

button {
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0.6em 1.2em;
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
  background-color: #1a1a1a;
  cursor: pointer;
  transition: border-color 0.25s;
}
button:hover {
  border-color: #646cff;
}
button:focus,
button:focus-visible {
  outline: 4px auto -webkit-focus-ring-color;
}

vue3自带的全局样式 删除了就可以了