Heim > Web-Frontend > js-Tutorial > Detaillierte Erläuterung der Schritte zur Verwendung der Vue-Popup-Nachrichtenkomponente

Detaillierte Erläuterung der Schritte zur Verwendung der Vue-Popup-Nachrichtenkomponente

php中世界最好的语言
Freigeben: 2018-05-15 10:15:47
Original
2327 Leute haben es durchsucht

Dieses Mal werde ich Ihnen die Schritte zur Verwendung der Vue-Popup-Nachrichtenkomponente ausführlich erläutern. Was sind die Vorsichtsmaßnahmen bei der Verwendung der Vue-Popup-Nachrichtenkomponente? , lass uns einen Blick darauf werfen.

Ursprünglich hatte ich geplant, ein Popup-Fenster zu schreiben, das nach Abschluss der Eingabeaufforderung automatisch verschwindet, aber ich habe nicht an den Ein- und Ausblendeffekt gedacht. Daher gilt es vorerst als Halbfertigprodukt.

Der Übungscode lautet wie folgt:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <title>ys-alert-component</title>

 <style>

 input {

  border-radius: 5px;

  border: 1px solid #2f9df9;

  background-color: #39befb;

  background: -webkit-gradient(linear, 0 0, 0 100%, from(#39befb),

  to(#2091fc));

  background: -moz-gradient(linear, 0 0, 0 100%, from(#39befb),

  to(#2091fc));

  background: -o-gradient(linear, 0 0, 0 100%, from(#39befb), to(#2091fc));

  background: -ms-gradient(linear, 0 0, 0 100%, from(#39befb), to(#2091fc));

  color: #FFFFFF;

  height: 28px;

  padding: 0 20px;

  cursor: pointer;

  line-height: 28px;

  display: inline-block;

  margin-right: 5px;

  outline: none;

 }

 .ys-alert {

  display: inline-block;

  height: 26px;

  padding: 8px 25px;

  min-width: 200px;

  border-radius: 5px;

  box-shadow: 0 4px 12px rgba(0,0,0,.5);

  background: #b8d2f3;

  margin: 50px;

 }

 .icon {

  float: left;

  width: 26px;

  height: 26px;

  border: 3px solid #fff;

  border-radius: 50%;

  font-size: 16px;

  line-height: 20px;

  font-weight: bold;

  text-align: center;

  color: #fff;

  box-sizing: border-box;

  margin-right: 8px;

 }

 .content {

  float: left;

  line-height: 26px;

  font-size: 15px;

  color: #fff;

 }

 /*成功的样式*/

 .success {

  background: #9bdda7;

 }

 /*失败的样式*/

 .error {

  background: #f7d13b;

 }

 /*警告样式*/

 .warning {

  background: #e98c97;

 

 </style>

 <script src="https://unpkg.com/vue/dist/vue.js"></script>

</head>

<body>

 <p id="app">

 <input type="button" value="呼唤默认的按钮" @click="alertShow(&#39;info&#39;)">

 <input type="button" value="呼唤成功的按钮" @click="alertShow(&#39;success&#39;)">

 <input type="button" value="呼唤失败的按钮" @click="alertShow(&#39;error&#39;)">

 <input type="button" value="呼唤警告的按钮" @click="alertShow(&#39;warning&#39;)">

 <input type="button" value="呼唤美美哒博客" @click="alertShow(&#39;yuki&#39;)">

 <ys-alert-component

  icon-bar="O"

  type="info"

  v-if="info"

  alert-content="我是默认的按钮哟">

 </ys-alert-component>

 <ys-alert-component

  icon-bar="V"

  type="success"

  v-if="success"

  alert-content="我是成功的按钮哟"

 </ys-alert-component>

 <ys-alert-component

  icon-bar="X"

  type="error"

  v-if="error"

  alert-content="我是失败的按钮哟">

 </ys-alert-component>

 <ys-alert-component

  icon-bar="!"

  type="waring"

  v-if="warning"

  alert-content="我是警告的按钮哟">

 </ys-alert-component>

 <ys-alert-component

  icon-bar="E"

  type=""

  v-if="yuki"

  alert-content="我是灰色定制的按钮哟"

  style="background-color: #ccc; color: #fff;">

  <p slot="alert-content">

  <span>章鱼不丸子</span>

  <a href="http://www.yuki.kim" rel="external nofollow" >http://www.yuki.kim</a>

  </p>

 </ys-alert-component>

 </p>

 <script>

 /*

  props:

  type:

   info: 默认

   success: 成功

   error: 失败

   warning:警告

  iconBar: 字符串,我没有图标,就用字母写的。很low...

  alertContent: 定制提醒的内容

  hideIcon: 隐藏或者显示丑丑的图标

  slot:

  alert-content: 定制提醒信息内容及icon整套模板

  methods:

  无,没有写方法

 */

 Vue.component("ys-alert-component", {

  props: {

  iconBar: {

   type: String,

   default""

  },

  alertContent: {

   type: String,

   default"请定制提醒内容"

  },

  hideIcon: {

   type: Boolean,

   default: false

  },

  type: {

   type: String,

   default""

  }

  },

  template:`

  <p class="ys-alert" :class="type">

   <slot name="alert-content">

   <p class="icon" >{{ iconBar }}</p>

   <p class="content">

    {{ alertContent }}

   </p>

   </slot>

  </p>`

 })

 var vm = new Vue({

  el: "#app",

  data: {

  info: false,

  error: false,

  success: false,

  warning: false,

  yuki: false

  },

  methods: {

  alertShow (type) {

   switch (type) {

   case "info" :

    this.info = !this.info;

    //setTimeout("vm.info = !vm.info", 2000);

    break;

   case "error" :

    this.error = !this.error;

    //setTimeout("vm.error = !vm.error", 2000);

    break;

   case "success" :

    this.success = !this.success;

    //setTimeout("vm.success = !vm.success", 2000);

    break;

   case "warning" :

    this.warning = !this.warning;

    //setTimeout("vm.warning = !vm.warning", 2000);

    break;

   default:

    this.yuki = !this.yuki;

    //setTimeout("vm.yuki = !vm.yuki", 2000);

   }

  }

  }

 })

 </script>

</body>

</html>

Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln zu PHP Chinesische Website!

Empfohlene Lektüre:

Analyse der Schritte zur Verwendung der PopupWindow-Komponente mit Vue

vue+jquery+lodash ist Beim Schieben oben aufgehängt und fixiert. Detaillierte Erläuterung der Funktionsimplementierung

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zur Verwendung der Vue-Popup-Nachrichtenkomponente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage